how do I get a generic list in Angular/Ionic?-CodePudding

I have an array. In this array are the current keys that I want to use in a generic list.

['index_nummer', 'index_name', 'min_val', 'max_val', 'index_wert']

These keys can change depending on the desired list, of course. This array is stored in the variable tableDescription=[].

From a GetRequest I get a JSON with the desired data. Again, the list is generic and thus the key/value pairs can change.

{id: '24', index_nummer: '4', index_name: 'Test1', min_val: '51.0', max_val: '85.0', index_wert: 1}
{id: '26', index_nummer: '4', index_name: 'Test2', min_val: '51.0', max_val: '85.0', index_wert: 1}

The JSON is stored in the variable tableInformation=[].

Now I have tried to build a generic list, but unfortunately without success:

   <ion-item id="list-value" button *ngFor="let value of tableInformation">
                <div *ngFor="let columnName of tableDescripton">
                  <ion-col size="1.8" offset="0" >
                    <ion-label>{{value.columnName}}</ion-label>
                  </ion-col>
                </div>
   </ion-item>

Currently no data is displayed. I also do not receive an error message. In the Data Interpolation {{value.columnName}} Angular wants to return the value with the matching key (columnName). However, I wanted the key to come from my tableDescription array. Now to the question: how do I get a generic list in Angular/Ionic where I want to take the keys from an array? I hope I have described my problem sufficiently.

Thanks in advance

CodePudding user response：

You can access by its index/key dynamically, hence ion-label binding should be changed to below.

<ion-label>{{value[columnName]}}</ion-label>

instead of

{{value.columnName}}

Also, there is a typo tableDescripton should be tableDescription

Stackblitz