Iterieren Sie zwei Arrays in * ngFor-- IONIC2/Angular2

Question

Ich habe Werte in zwei Arrays gespeichert, um in einer einzigen Ion-Liste zu iterieren. Bilerstatusstatus und Bilerstatusnamenst sind die beiden Arrays.

Ich habe das versucht folgende

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

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

</ion-list> 

und

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

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

</ion-list> 

Sein iterieren erste iterierte Wert sowohl für lokale Variable nehmen.

Gibt es etwas, das ich vermisse?

ist es anyother Art und Weise beide Werte in einzelnen Array zu speichern und teilen Sie es in Ansicht Seite ngFor mit ..

Answer 1

ich diesen Ansatz verfolgt haben .. I-Werte in einzelnen Array gespeichert sind, anstelle von zwei Arrays, wie es kommt aus einer Hand.

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

In HTML-Teil

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

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

</ion-list> 

Sein für mich gearbeitet ..

Answer 2

Sie können den Index der dies zu erreichen ngFor Richtlinie nutzen.

Answer 3

Ich könnte eine Pipe erstellen, um Ihre beiden Arrays zu einem einzigen zusammenzuführen, und dann können Sie über dieses neue Array iterieren. Hier

ist ein Beispiel:

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

Und verwenden Sie es so:

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

Answer 4

Warum stattdessen diese

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

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

</ion-list> 

tun Sie einen einzelnen array in Ihrem Code nicht erstellen :

// 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] 
         }); 
} 

Und dann in Ihrer Seite ein:

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

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

</ion-list>