奮闘！配列を ngModel にデータバインディングする

Angular で、配列を ngModel で双方向にバインディングする方法を解説します。

サンプルソース

とにもかくにも、サンプルコードである。

HTML テンプレート

<form class="example-form">
  <div *ngFor="let id of userId;let i = index;trackBy: trackByItem">
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>ユーザー{{i+1}}</mat-label>
      <input matInput 
        placeholder="Ex. @username" value="Sushi" 
        [name]="'userid_' + i"
        [(ngModel)]="userId[i]">
    </mat-form-field>    
  </div>
</form>

TypeScript 側には、ビューとバインディングする配列（userId）を定義する。

配列をバインディングする際、Angular は配列のいずれかの要素に変更が生じると、コレクションのすべての要素を再生成するため、trackBy に trackByItem メソッドを設定することで、変更があった要素のみ再生成するようにしている。

export class TwGachaComponent implements OnInit {

  //バインドする配列
  userId: string[] = ["@yamada", "@suzuki", "@hayashi", "sato", "yamamoto"];

  constructor() { }

  //配列の変更箇所のみをDOM再生成するための trackBy
  trackByItem(index: number, obj: any): any {
    return index;
  }
}

実行結果は、こんな感じ。