2017-12-18 2 views
0

난 당신이 좀 도와 주 시겠어요이곱하기 ngFor 각도 2

<mat-card *ngFor="let room of arr; let floor of floorArr"> 
    <mat-card-content> 
    <h3>Room Number: {{room}}</h3> 
    <p>Floor: {{floor}}</p> 
    </mat-card-content> 
</mat-card> 

처럼 ngFor 뭔가를 두 개의 인수를 전달하고 싶습니다 - 같은 것을 할 수 있습니다? 이것을 쓰는 올바른 방법은 무엇입니까?

당신은 인덱스 참조를 포함하고 해당 통해 배열에 액세스 할 수
+2

당신이 필요로하는 하나의 배열을 가지고 ng로 접근하기 전에 그것을 구성하십시오. –

답변

1

:

<mat-card *ngFor="let room of arr; let i = index"> 
    <mat-card-content> 
    <h3>Room Number: {{room}}</h3> 
    <p>Floor: {{floorArr[i]}}</p> 
    </mat-card-content> 
</mat-card> 

다른 옵션이 결합 된 배열이를 매핑하고는 반복하는 너무 좋아 :

getArray(){ 
    return this.arr.map((a, i) => ({ room: a, floor: this.floorArr[i] })); 
}; 


<mat-card *ngFor="let obj of getArray()"> 
    <mat-card-content> 
    <h3>Room Number: {{obj .room}}</h3> 
    <p>Floor: {{obj.floor}}</p> 
    </mat-card-content> 
</mat-card> 
+0

@AnnaF 내 편집을 참조하십시오. – Zze

관련 문제