材料自动完成:将多个文本输入链接到一个自动完成面板

如果你只想做 将多个输入字段链接到一个自动完成面板 就这么简单- 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'];
}

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