2017-08-26 13 views
0
の代わりにinを使用する

私のタイスクリプトファイルにはいくつかのオブジェクトの配列があります。HTML + Ionic 3.x:htmlファイルでforループを使用するには

これらの配列を同時に繰り返して、その内容をhtmlファイルに表示したいとします。内容は次のとおりです。

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

幸いにも、配列は常に同じサイズです。今、私は(このようなもの)をイオン項目の後にforループをしたい:「それはないので 『ngForIn』をバインドできません:

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

しかし、このようにそれをやってすることは私にエラーを与えます「イオン・アイテムの既知の財産。今、私は次の回避策を見つけたが、それはかなり醜いようだ。

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

より効率的に/かなり高く評価されるだろう:)

これを行う方法上の任意のアドバイス

ありがとう!

答えて

3

あなたが最後にまだ最高であるが、ここでは、他の方法

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

これは

<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> 
非常に単純ですが
関連する問題