Reaktiva loopar i Angular

Reaktivitet kommer också att fungera i en loop ngFor. Det betyder att när arrayen ändras kommer dessa ändringar omedelbart att visas på skärmen.

Låt oss prova i praktiken. Låt oss säga att vi har följande array:

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

Låt oss visa vår array i en loop som en lista:

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

Låt oss skapa en knapp, vid klick på vilken en metod i klassen kommer att anropas:

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

I denna metod kommer vi på något sätt att ändra vår array, till exempel lägga till ett nytt element i den:

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

Om du nu startar koden och klickar på knappen, kommer ett nytt element omedelbart att dyka upp i listan efter klicket.

Given en array. Visa dess element i en loop. Skapa en knapp, vid klick på vilken det sista elementet kommer att tas bort från arrayen.