HTML + Ionic 3.x: How to use a for loop in the html file using in instead of of
14,932
Solution 1
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>
Solution 2
This is pretty simple
<ul>
<li *ngFor="let item of array1">{{item.property}}<li>
<ul>
<ul>
<li *ngFor="let item of array2">{{item.property}}<li>
<ul>
<ul>
<li *ngFor="let item of array3">{{item.property}}<li>
<ul>
Related videos on Youtube
Comments
-
J. Hesters almost 2 years
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!
-
TheTC almost 6 yearsWell, that's an example of a foreach loop, not a for loop.