Kitaran Reaktif dalam Angular

Kereaktifan juga akan berfungsi dalam kitaran ngFor. Ini bermakna bahawa apabila perubahan pada tatasusunan berlaku, perubahan tersebut akan serta-merta dipaparkan pada skrin.

Mari kita cuba dalam praktik. Katakan kita mempunyai tatasusunan berikut:

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

Mari keluarkan tatasusunan kami dalam kitaran sebagai senarai:

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

Mari buat butang, yang apabila diklik akan memanggil kaedah kelas:

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

Dalam kaedah ini, kita akan mengubah tatasusunan kami, contohnya, menambah elemen baru ke dalamnya:

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

Sekarang, jika anda menjalankan kod dan menekan butang, elemen baru akan muncul dalam senarai sejurus selepas menekan.