Reaktive løkker i Angular
Reaktivitet vil også fungere i en løkke med
ngFor. Dette betyr at når arrayet endres,
vil endringene umiddelbart vises på skjermen.
La oss prøve det i praksis. La oss si at vi har følgende array:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
La oss vise arrayet vårt i en løkke som en liste:
<ul>
<li *ngFor="let elem of arr">
{{ elem }}
</li>
</ul>
La oss lage en knapp som, når den klikkes på, vil kalle en metode i klassen:
<button (click)="add()">
add
</button>
I denne metoden skal vi endre arrayet vårt på en eller annen måte, for eksempel ved å legge til et nytt element:
export class AppComponent {
public text: string = '';
public add(): void {
this.arr.push('!');
}
}
Nå, hvis du starter koden og klikker på knappen, vil et nytt element vises i listen umiddelbart etter klikket.
Du har et array. Vis dets elementer i en løkke. Lag en knapp som, når den trykkes, vil fjerne det siste elementet fra arrayet.
