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:

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

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

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

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

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