物料自動完成：將多個文本輸入鏈接到一個自動完成面板

Question

問題 ：

如何將多個文本輸入鏈接到一個自動完成面板 ？

用例

給定具有多個耦合字段的形式：電話號碼（ <input> ）; 電話說明/標簽（ <input [matAutocomplete]> ）。 用戶應選擇先前輸入的電話說明/標簽之一。

技術挑戰

按照官方示例 ， <mat-autocomplete>和<input>必須互相引用，例如

<mat-form-field>
  <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
</mat-autocomplete>

如果此類元素是在循環中生成的，例如

<div *ngFor="let item of items; index as index">
    ...
</div>

當無法動態生成mat-autocomplete ID時。

Answer 1

如果您要做的就是將多個輸入字段鏈接到一個自動完成面板 ，就這么簡單- 代碼日志

標記

<form class="example-form">
  <mat-form-field class="example-full-width" *ngFor="let autoComplete of autoCompletes">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
  </mat-form-field>
  <mat-autocomplete #auto ="matAutocomplete">
    <mat-option *ngFor="let option of options" [value]="option">
      {{option}}
    </mat-option>
  </mat-autocomplete>
</form>

碼

export class AutocompleteSimpleExample {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  autoCompletes = ['batman', 'superman'];
}

還是要有多個輸入字段/自動完成面板對？ 這將必須在模板內完成，因為模板變量僅是靜態的。