* ngFor-- IONIC2/Angular2で2つの配列を反復する

Question

2つの配列に値を格納して、1つのイオンリストに反復する。 BillerstatusstateとBillerstatusnamelstは2つの配列です。

私は、ローカル変数の両方のための最初の反復値をとる

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst " > 

    {{bil}} <button round>{{stat}}</button> 

</ion-list> 

と

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst " > 

    {{bil}} <button round>{{stat}}</button> 

</ion-list> 

そのを反復するために、以下を試してみました。

何かがありますか？

単一アレイ内の両方の値を格納し、ngForを使用してビュー側でそれを分割する任意の他の方法がある。..

Answer 1

私はこのアプローチに従っている.. 私はそれとして、単一配列内の値の代わりに、二つの配列が格納されています単一のソースに由来します。

<ion-list ion-item *ngFor="let bil of Billerstatusnamelst " > 

    {{bil.name}} <button round>{{bil.Status}}</button> 

</ion-list> 

その私のために働いていた

HTMLの一部で

this.Billerstatusnamelst.push({name:"testname",Status:"Failure"}); 

...

Answer 2

あなたはこれを達成するためにngForディレクティブのインデックスを活用することができます。

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let i=index"> 

    {{Billerstatusnamelst[i]}} <button round>{{stat}}</button> 

</ion-list> 

Answer 3

パイプを作成して、2つの配列を1つにマージし、この新しい配列に対して繰り返し処理を行うことができます。ここ

サンプルである：

@Pipe({ 
    name: 'merge' 
}) 
export class MergePipe { 
    transform(arr1, arr2) { 
    var arr = []; 
    arr1.forEach((elt, i) => { 
     arr.push({ state: elt, name: arr2[i] }); 
    }); 
    } 
} 

そして、このようにそれを使用する：

<ion-list ion-item *ngFor="let elt of Billerstatusstate | merge:Billerstatusnamelst" > 
    {{elt.name}} <button round>{{elt.state}}</button> 
</ion-list>  

Answer 4

なぜ代わりにあなたのコード内の単一arrayを作成しないでください。この

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst " > 

    {{bil}} <button round>{{stat}}</button> 

</ion-list> 

を行います：

// I'm assuming they both have the same size 
for (var _i = 0; _i < Billerstatusstate.length; _i++) { 
    this.singleArray.push({ 
         stat: this.Billerstatusstate[_i], 
         bil: this.Billerstatusnamelst[_i] 
         }); 
} 

あなたのページで

そして：代わりにインデックスの

<ion-list ion-item *ngFor="let item of singleArray;" > 

    {{item.bil}} <button round>{{item.stat}}</button> 

</ion-list>