Usando Angular 2, quiero duplicar una línea en una plantilla varias veces. Iterar sobre un objeto es fácil, *ngFor="let object of objects" . Sin embargo, quiero ejecutar un bucle for simple, no un bucle foreach . Algo así como (pseudo-código):
{for i = 0; i < 5; i++} <li>Something</li> {endfor}¿Cómo haría esto?
Puede generar dinámicamente una matriz del tiempo que desee representar <li>Something</li> y luego hacer ngFor sobre esa colección. También puede utilizar index del elemento actual.
Margen
<ul> <li *ngFor="let item of createRange(5); let currentElementIndex=index+1"> {{currentElementIndex}} Something </li> </ul>Código
createRange(number){ // var items: number[] = []; // for(var i = 1; i <= number; i++){ // items.push(i); // } // return items; return new Array(number); } Debajo del capó, angular eliminó esta sintaxis *ngFor a la versión ng-template .
<ul> <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn"> {{currentElementIndex}} Something </ng-template> </ul>Puede crear una instancia de una matriz vacía con un número dado de entradas si pasa un int al constructor de Array y luego itera sobre él a través ngFor .
En su código de componente:
export class ForLoop { fakeArray = new Array(12); }En tu plantilla:
<ul> <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li> </ul>Las propiedades del índice le dan el número de iteración.
Puedes hacer ambas cosas en una si usas index
<div *ngFor="let item of items; let myIndex = index> {{myIndex}} </div>Con esto puedes obtener lo mejor de ambos mundos.