* ngFor-- IONIC2/Angular2에서 두 개의 배열을 반복하십시오.

Question

두 개의 배열에 값을 저장하여 단일 이온 목록에서 반복했습니다. Billerstatusstate와 Billerstatusnamelst는 두 개의 배열입니다.

I는 로컬 변수

<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를 사용하여보기 측에서 그것을 분할하는 anyother 방법이 ..

Answer 1

I이 방법을 따랐다을 .. I 대신 그것은 같은 두 배열 단일 배열의 값을 저장 한 다음

샘플이고 단일 출처에서 온 것입니다.

<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

두 개의 배열을 하나의 "병합"파이프로 만들면이 새로운 배열을 반복 할 수 있습니다.

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

을하는 :

페이지에서

: 그리고

대신 인덱스의

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

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

</ion-list>