Reaktive Schleifen in Angular

Reaktivität funktioniert auch in einer ngFor-Schleife. Das bedeutet, dass Änderungen am Array sofort auf dem Bildschirm angezeigt werden.

Lassen Sie uns das in der Praxis ausprobieren. Nehmen wir an, wir haben das folgende Array:

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

Lassen Sie uns unser Array in einer Schleife als Liste ausgeben:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

Erstellen wir einen Button, bei dessen Klick eine Klassenmethode aufgerufen wird:

app/app.component.html<button (click)="add()">
  add
</button>

In dieser Methode ändern wir unser Array auf irgendeine Weise, zum Beispiel indem wir ein neues Element hinzufügen:

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

Wenn Sie den Code jetzt starten und auf die Schaltfläche klicken, erscheint sofort nach dem Klick ein neues Element in der Liste.