Итерация двух массивов в * ngFor-- IONIC2/Angular2

Question

Я сохранил значения в двух массивах для повторения в одном списке ионов. Billerstatusstate и Billerstatusnamelst - это два массива.

Я попытался следующие итерировать

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

его принятия первого итерированным значение как для локальной переменной.

Есть ли что-то мне не хватает ??

есть anyother способ сохранить оба значения в одном массиве и разделить его на вид сбоку, используя ngFor ..

Answer 1

Я следовал такой подход .. я хранить значения в одном массиве вместо двух массивов, поскольку в ней происходит из одного источника.

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

В HTML части

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

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

</ion-list> 

Сво работал для меня ..

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

Я мог бы создать трубу, чтобы «объединить» ваши два массива в один, а затем вы можете перебирать этот новый массив.

Вот пример:

@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

Почему вместо того, чтобы делать это

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

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

</ion-list> 

вы не создали ни одного array в коде :

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