Reaktywne pętle w Angular

Reaktywność będzie również działać w pętli ngFor. Oznacza to, że przy zmianach tablicy, zmiany te natychmiast pojawią się na ekranie.

Spróbujmy w praktyce. Załóżmy, że mamy następującą tablicę:

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

Wyświetlmy naszą tablicę w pętli w postaci listy:

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

Stwórzmy przycisk, po kliknięciu którego będzie wywoływana metoda klasy:

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

W tej metodzie w jakiś sposób zmodyfikujmy naszą tablicę, na przykład, dodajmy do niej nowy element:

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

Teraz, jeśli uruchomimy kod i naciśniemy przycisk, to natychmiast po naciśnięciu na liście pojawi się nowy element.

Dana jest tablica. Wyświetl jej elementy w pętli. Stwórz przycisk, po naciśnięciu którego z tablicy będzie usuwany ostatni element.