Reaktive Schleifen in Angular

Reaktivität funktioniert auch in einer ngFor-Schleife. Das bedeutet, dass Änderungen am Array sofort auf dem Bildschirm angezeigt werden.

Lassen Sie uns das in der Praxis ausprobieren. Nehmen wir an, wir haben das folgende Array:

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

Lassen Sie uns unser Array in einer Schleife als Liste ausgeben:

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

Erstellen wir einen Button, bei dessen Klick eine Klassenmethode aufgerufen wird:

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

In dieser Methode ändern wir unser Array auf irgendeine Weise, zum Beispiel indem wir ein neues Element hinzufügen:

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

Wenn Sie den Code jetzt starten und auf die Schaltfläche klicken, erscheint sofort nach dem Klick ein neues Element in der Liste.

Gegeben ist ein Array. Geben Sie seine Elemente in einer Schleife aus. Erstellen Sie eine Schaltfläche, bei deren Betätigung das letzte Element aus dem Array entfernt wird.