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('!');
	}
}

Эми, эгерде кодду иштетип, баскычка бассаңыз, анда басуу менен эле тизмеде жаңы элемент пайда болот.

Массив берилген. Анын элементтерин цикл аркылуу көрсөтүңүз. Басылуу менен массивден акыркы элемент өчүрүлө турган баскычты жасаңыз.