angular - Material 自动完成 : Link multiple text inputs to one autocomplete panel

Question

问题:

如何将多个文本输入链接到一个 autocomplete panel ？

用例

给定一个包含多个耦合字段的表单:电话号码 ( <input> );电话描述/标签(<input [matAutocomplete]>)。用户应选择先前输入的电话描述/标签之一。

技术挑战

根据 official example , <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

如果您只想将多个输入字段链接到一个自动完成面板，就这么简单 - stackblitz

标记

<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'];
}

或者您想要多个输入字段/自动完成面板对吗？这必须在模板内完成，因为模板变量是静态的。