HTML + Ionic 3.x:如何在 html 文件中使用 for 循环,使用 in 而不是 [英] HTML + Ionic 3.x: How to use a for loop in the html file using in instead of of
问题描述
我的打字稿文件中有几个对象数组.
I have several arrays of objects in my typescript file.
我想同时遍历这些数组并在 html 文件中显示它们的内容.内容如下:
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>
幸运的是,数组的大小始终相同.现在我想在 ion-item 之后做一个 for 循环(类似这样):
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>
但是这样做会给我一个错误:无法绑定 'ngForIn',因为它不是 '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 :)
谢谢!
推荐答案
你最后是最好的,但这是另一种方式
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>
这篇关于HTML + Ionic 3.x:如何在 html 文件中使用 for 循环,使用 in 而不是的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!