각도 2 : * ngFor 들어간다

Question

다음 시나리오는 자바 스크립트에서 꽤 쉬울 것이지만 Angular에서 작동하는 데 문제가 있습니다. ngFor와

array a = ("id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3) 

내가 지금이 그리드 A는이 칼럼에서 colums 및 블록에서 분리 얻을 중 모든 요소를 ​​만들려고 :

내가 좋아하는 배열을 얻었다. 그래서 내 현재 코드 (작동하지만 심술 궂은). 이 같은

<div *ngFor="let a of a"> 
 
    <template [ngIf]="a.column=='1'"> 
 
    <div *ngFor="let b of a"> 
 
     <template [ngIf]="b.blockrow=='1'"> 
 
     Block 1 in column 1{{b.name}} 
 
     </template> 
 
    </div> 
 
    <div *ngFor="let b of a"> 
 
     <template [ngIf]="b.blockrow=='2'"> 
 
     Block 2 in column 1{{b.name}} 
 
     </template> 
 
    </div> 
 
    <div *ngFor="let b of a"> 
 
     <template [ngIf]="b.blockrow=='3'"> 
 
     Block 3 in column 1{{b.name}} 
 
     </template> 
 
    </div> 
 
    </template> 
 
</div>

가 뭔가 내가 모든 컬럼에 대해 실행 않습니다. 그 말은 12 번에 걸쳐 동일한 배열을 물결 모양으로 반복한다는 것을 의미합니다. 그것을 더 아름답게 할 수있는 방법이 있습니까?

Answer 1

[ngIf], 사용 후 오른쪽 좌표 의 요소를 배열의 배열을 구축 자바 스크립트를 사용할 수 있어야 ngFor 내부 * 번호 :

<div *ngFor="let row of rows"> 
    <div *ngFor="let col of row"> 
    Block {{col.blockrow}} in column {{col.column}} {{col.name}} 
    </div> 
</div> 

세 번째 * ngFor는 여러 개의 블록이 동일한 좌표를 가질 경우 필요할 수 있습니다.

Answer 2

당신은 잘못된 구문을 사용하는 것은 * *ngIf 대신 구성 요소에서

<div *ngFor="let a of a"> 
    <template *ngIf="a.column=='1'"> 
    <div *ngFor="let b of a"> 
     <template *ngIf="b.blockrow=='1'"> 
     Block 1 in column 1{{b.name}} 
     </template> 
    </div> 
    <div *ngFor="let b of a"> 
     <template *ngIf="b.blockrow=='2'"> 
     Block 2 in column 1{{b.name}} 
     </template> 
    </div> 
    <div *ngFor="let b of a"> 
     <template *ngIf="b.blockrow=='3'"> 
     Block 3 in column 1{{b.name}} 
     </template> 
    </div> 
    </template> 
</div>