循環迭代在HTML端

我在home.ts這下面的代碼：循環迭代在HTML端

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文件中執行此操作？

來源

2017-05-24 CoCoNours

test1，test2，test3，test4等在每個卡？ –

我想要test1，test4然後是test2，test5，最後是test3，test6 – CoCoNours

他們有相同數量的測試嗎？ - 「toto」和「tata」？ –

您只需將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>

來源

2017-05-24 09:51:23

非常感謝！它工作得很好。 – CoCoNours

循環迭代在HTML端

回答

相關問題