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:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

La oss vise arrayet vårt i en løkke som en liste:

app/app.component.html<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:

app/app.component.html<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:

app/app.component.tsexport 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.