javascript - html 端的循环迭代器

Question

我在 home.ts 中有以下代码:

selected: any;
this.selected = [{"toto": ["test1", "test2", "test3"], "tata": ["test4", "test5", "test6"]}]

以及 home.html 中的这段代码:

<ion-content>
    <div *ngFor="let select of selected">
        <ion-card>
            <p> toto: {{select.toto}}<p>
            <p> tata: {{select.tata}}<p>
        </ion-card>
    </div>
</ion-content>

所以这段代码显示toto:test1、test2、test3，其他的也一样。我想要的就是这样的:

<ion-card>
    <p>toto: {{selected.toto[0]}}</p>
</ion-card>
<ion-card>
    <p>toto: {{selected.toto[1]}}</p>
</ion-card>

是否可以用递增的变量替换 0？迭代器，或者给出相同结果的东西？我是否被迫在 ts 文件中执行此操作？

Answer 1

您可以将 ngFor 与 ion-card 一起使用。

<ion-content>
    <div *ngFor="let select of selected">
        <ion-card *ngFor = "let toto of select.toto;let i=index">
            <p> toto: {{toto}}</p>
            <p> tata: {{select.tata[i]}}</p>
        </ion-card>    
    </div>
</ion-content>