HTML + Ionic 3.x:如何在 html 文件中使用 for 循环 using in 而不是 of

Question

我的打字稿文件中有几个对象数组。

我想同时遍历这些数组并在 html 文件中显示它们的内容。以下是内容：

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

幸运的是，数组的大小始终相同。现在我想在离子项之后做一个 for 循环(像这样(：

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

但是这样做会给我一个错误："无法绑定'ngForIn'，因为它不是'ion-item'的已知属性。现在我找到了以下解决方法，但它看起来很丑陋。

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

任何关于如何更有效/漂亮的建议将不胜感激:)

谢谢！

Answer 1

你最后是最好的，但这是另一种方式

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>

Answer 2

这很简单

<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>