MatAutoCompleteを1つのComponentに複数実装する際に、入力補完が全て同じになってしまう

2563 ワード
angularMaterial Angular Angular テキストリンク

メモ代わりの記事です

やりたかったこと
Angular Material mat-form-fieldで入力補完がしたかったのでmat-autocompleteを使用した
mat-form-fieldを2つ実装して別々に入力補完したかった

失敗したこと
mat-form-fieldを2つ実装したが、1つ目の入力補完の内容が2つ目にも反映されてしまった

要約
コード一部抜粋

<input type="text"
                 matInput
                 [formControl]="control"
                 [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">

<input type="text"
                 matInput
                 [formControl]="otherControl"
                 [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">

matAutocomplete用のテンプレート変数を分ける
上記だと#autoの指定が一緒なので1つめのautocompleteの内容が反映される
テンプレート変数を分ければ正常に別々の入力補完が聞くようになる