Αντιδραστικοί Βρόχοι στο Angular

Η αντιδραστικότητα θα λειτουργεί επίσης σε έναν βρόχο ngFor. Αυτό σημαίνει ότι όταν αλλάζει ο πίνακας, οι αλλαγές θα εμφανίζονται αμέσως στην οθόνη.

Ας το δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε τον ακόλουθο πίνακα:

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

Ας εμφανίσουμε τον πίνακα μας σε έναν βρόχο ως λίστα:

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

Ας δημιουργήσουμε ένα κουμπί που, όταν γίνεται κλικ πάνω του, θα καλεί μια μέθοδο της κλάσης:

app/app.component.html<button (click)="add()">
  προσθήκη
</button>

Σε αυτή τη μέθοδο, ας αλλάξουμε με κάποιο τρόπο τον πίνακα μας, για παράδειγμα, προσθέτοντας ένα νέο στοιχείο σε αυτόν:

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

Τώρα, αν εκτελέσουμε τον κώδικα και πατήσουμε το κουμπί, αμέσως μετά το πάτημα θα εμφανιστεί ένα νέο στοιχείο στη λίστα.