Reaktive løkker i Angular

Reaktivitet vil også fungere i en ngFor-løkke. Det betyder, at ændringer i arrayet umiddelbart vil blive vist på skærmen.

Lad os prøve det i praksis. Antag, at vi har følgende array:

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

Lad os udskrive vores array i en løkke som en liste:

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

Lav en knap, der, når der klikkes på den, vil kalde en metode i klassen:

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

I denne metode vil vi ændre vores array på en eller anden måde, for eksempel ved at tilføje et nyt element til det:

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

Hvis du nu kører koden og klikker på knappen, vil et nyt element straks blive tilføjet til listen.

Givet et array. Udskriv dets elementer i en løkke. Lav en knap, der, når der klikkes på den, fjerner det sidste element fra arrayet.