Angular-дағы реактивті циклдар

Реактивтілік циклде де жұмыс істейді ngFor. Бұл массив өзгерген кезде, бұл өзгерістер бірден экранда көрінетінін білдіреді.

Практикада көрейік. Бізде келесі массив бар делік:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Массивімізді циклде тізім түрінде шығарайық:

<ul>
	<li *ngFor="let elem of arr">
		{{ elem }}
	</li>
</ul>

Сынып әдісін шақыратын батырманы жасайық:

<button (click)="add()">
	add
</button>

Бұл әдісте массивімізді біршама өзгертейік, мысалы, оған жаңа элемент қосамыз:

export class AppComponent {
	public text: string = '';
	
	public add(): void {
		this.arr.push('!');
	}
}

Енді, егер кодты іске қосып, батырманы бассақ, басу сәтінде тізімде жаңа элемент пайда болады.

Массив берілген. Оның элементтерін циклде шығарыңыз. Массивтен соңғы элементті жоятын батырманы жасаңыз.