Constructia for în Angular

Ciclul prin elementele unui array poate fi, de asemenea, pornit folosind construcția @for.

Să încercăm în practică. Să presupunem că în componenta noastră există din nou un array:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Să analizăm sintaxa construcției:

@for () {
	tag-uri
}

Să specificăm array-ul care va fi iterat și variabila în care vor fi plasate elementele:

@for (elem of arr) {
	tag-uri
}

Cu toate acestea, asta nu este tot. Pentru o funcționare corectă a Angular, trebuie să specificăm comanda specială track. După aceasta, trebuie să indicăm o valoare unică pentru fiecare element al array-ului. Acest lucru este necesar pentru ca Angular să poată lucra mai optim cu DOM-ul. Să luăm ca astfel de valoare unică numărul elementului din array. Pentru aceasta, trebuie să specificăm variabila $index. Deci, iată codul nostru final:

@for (elem of arr; track $index) {
	<div>
		{{ elem }}
	</div>
}

Este dat array-ul:

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

Afișați fiecare element al acestui array într-un paragraf separat.