Reactive Loops ใน Angular

Reactivity ยังจะทำงานในลูป 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()">
  add
</button>

ในเมธอดนี้ เราจะเปลี่ยนแปลงอาร์เรย์ของเรา เช่น เพิ่มองค์ประกอบใหม่เข้าไป:

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

ตอนนี้ หากรันโค้ดและกดที่ ปุ่ม หลังจากกดทันทีในรายการ ก็จะปรากฏองค์ประกอบใหม่ขึ้นมา