Mat-自动完成多个字段答案

【问题标题】：Mat-Autocomplete multiple fieldsMat-自动完成多个字段
【发布时间】：2019-05-18 01:32:34
【问题描述】：

我正在使用 Mat-Autocomplete，但由于某种原因，它仅在我使用 1 个字段时才有效，当我添加另一个第二个字段时，会发生一些奇怪的事情。

在字段 1 和字段 2 上我都在下拉列表中看到相同的选项，这些选项是只有在我编辑字段 2 时才应该可用的选项。

是否可以有多个字段，我从来没有看到任何关于这个问题的例子。

字段1

<div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Sender</span>
  </div>
  <mat-form-field>
  <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[sender]" [ngModelOptions]="{standalone: true}">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let document of documents" [value]="document._source.field.Sender">
      <span>{{document._source.field.Sender}}</span>
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>
</div>

字段2

    <div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Receiver</span>
  </div>
  <mat-form-field>
    <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[receiver]" [ngModelOptions]="{standalone: true}" >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let document of documents" [value]="document._source.field.Receiver">
        <span>{{document._source.field.Receiver}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

【问题讨论】：

您还应该提供您的打字稿代码 (*.component.ts)，如果可能的话，提供一个有效的 stackblitz
我认为这与我的打字稿没有任何关系，我从我的 ts 中得到的唯一东西是“文档”，一个充满文档的对象：p

标签： angular forms autocomplete angular-material mat-autocomplete

【解决方案1】：

两个自动补全同名auto，需要不同的名字：

<input matInput [matAutocomplete]="auto1"...
<mat-autocomplete #auto1=...
...
<input matInput [matAutocomplete]="auto2"...
<mat-autocomplete #auto2=...

【讨论】：

我们可以在 ngFor 循环中动态分配#auto1、#auto2、....吗？
你救了我的命，谢谢，我以为这是默认名称
Id 可以是 #{{arrayIndex}} ，当我尝试时出现错误。我需要动态 ID，因为我不知道其中会有多少。