El siguiente escenario sería bastante fácil en javascript, pero tuve algunos problemas para que funcionara en Angular.
Tengo una matriz como:
array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)Con ngFor, trato de crear ahora una cuadrícula en la que todos los elementos se separan en columnas y bloques en esta columna. Así que mi código actual (funciona pero desagradable).
<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>Algo como esto hago para cada columna. Lo que significa que recorro la misma matriz 12 veces. ¿Hay alguna forma de hacerlo más bonito?
En su componente, use JavaScript para construir una matriz de matrices con los elementos de a en las coordenadas correctas, luego use *ngFor dentro de *ngFor:
<div *ngFor="let row of rows"> <div *ngFor="let col of row"> Block {{col.blockrow}} in column {{col.column}} {{col.name}} </div> </div>Es posible que se necesite un tercer *ngFor si varios bloques tienen las mismas coordenadas.
Está utilizando una sintaxis incorrecta, debe ser *ngIf en lugar de [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>