Angular – HTML + Ionic 3.x: How to use a for loop in the html file using in instead of of

angular, for-loop, ionic2, ionic3, typescript

I have several arrays of objects in my typescript file.

I want to iterate through these arrays simultaneously and display their contents in the html file. Here is the content:

<ion-item>  {{array1[i]}} {{array2[i]}} {{array3[i]}}</ion-item>

Luckily the arrays are always the same size. Now I want to do a for-loop after the ion-item (something like this):

<ion-item *ngFor="let i in array1">  {{array1[i]}} {{array2[i]}} {{array3[i]}}</ion-item>

But doing it this way gives me an error: "Can't bind 'ngForIn' since it isn't a known property of 'ion-item'. Now I've found the following workaround, but it seems pretty ugly.

<ion-item *ngFor="let counter of array1; let i = index">  {{array1[i]}} {{array2[i]}} {{array3[i]}}</ion-item>

Any advice on how to do this more efficiently / pretty would be highly appreciated 🙂

Thank you!

Best Solution

You last is the best yet, but here is an other way

TS

for(let i=0; i < n; i++){ // n is array.length   this.globalArray.push({ a1 : array1[i] , a2 : array2[i] , a3 : array3[i] });}

HTML

<ion-item *ngFor="let item of globalArray;">  {{item.a1}} {{item.a1}} {{item.a1}}</ion-item>