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()">
  add
</button>

このメソッド内で、例えば新しい要素を追加するなどして配列を変更します:

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

コードを実行してボタンをクリックすると、クリック直後にリストに新しい要素が表示されます。