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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/45894387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:50:41  来源:igfitidea点击:

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

angulartypescriptfor-loopionic2ionic3

提问by J. Hesters

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:

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

<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 之后做一个 for 循环(类似这样):

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

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

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

谢谢!

回答by Marouan

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

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

TS

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

HTML

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

回答by Prosenjit Manna

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>