Angular-та for құрылымы

Массив элементтерінің циклін @for құрылымы арқылы да іске қосуға болады.

Практикада сынап көрейік. Біздің компонентте қайтадан массив бар делік:

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

Құрылымның синтаксисін қарастырайық:

@for () {
	тегтер
}

Айналып өтілетін массивті және элементтерді қабылдайтын айнымалыны көрсетейік:

@for (elem of arr) {
	тегтер
}

Бірақ бұл әлі бәрі емес. Angular-дың дұрыс жұмыс істеуі үшін біз арнайы track командасын көрсетуіміз керек. Одан кейін біз әрбір массив элементі үшін бірегей мәнді көрсетуіміз керек. Бұл Angular-ға DOM-мен тиімдірек жұмыс істеуге көмектесу үшін қажет. Осындай бірегей мән ретінде массив элементінің номерін алайық. Ол үшін біз $index айнымалысын көрсетуіміз керек. Сонымен, міне біздің түпкілікті кодымыз:

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

Массив берілген:

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

Бұл массивтің әрбір элементін жеке абзацта шығарыңыз.