如何使用 Angular 材料 7.1.1 在同一页面上实现多个芯片自动完成？答案

【问题标题】：How do I have multiple chip autocomplete on the same page using Angular material 7.1.1?如何使用 Angular 材料 7.1.1 在同一页面上实现多个芯片自动完成？
【发布时间】：2019-05-20 01:21:55
【问题描述】：

我正在使用 Angular 6 和 Angular 材料 7.1.1 我正在尝试使用具有自动完成功能的芯片。但问题是，当我选择其中一个选项时，它会应用于所有具有自动完成功能的芯片。

`<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto1"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>`

如何让它只应用于特定的输入字段？

【问题讨论】：

上面的sn-p是角材质的例子。对上面的sn-p应该做哪些改变才能让另一个芯片自动完成？
看看：stackblitz.com/edit/angular-465vnw-umqv76
你需要吗？
你能告诉我如何用这个 stackblitz.com/angular/… 做到这一点，我真的很感激。
非常感谢@PrashantPimpale 这就是我想要的。谢谢！ :)

标签： angular angular-material angular6 angular-material-7

【解决方案1】：

我认为你只需要更改 mat-chip-list 的 id。

所以你第一次设置 id

<mat-chip-list #chipList>

然后在第二次设置 id

<mat-chip-list #chipList2>

然后你设置

[matChipInputFor]="chipList"

和[matChipInputFor]="chipList2"

现在应该可以正常工作了。

【讨论】：

【解决方案2】：

您必须为每个 Chip 列表使用不同的列表，并为 [matAutocomplete] 使用两个不同的属性

HTML 代码：

<mat-form-field class="example-chip-list">
    <mat-chip-list #chipList>
        <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
            {{fruit}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

<h2>Second Chips List</h2>

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits1"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove1(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput1
      [formControl]="fruitCtrl1"
      [matAutocomplete]="auto1"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add1($event)">
  </mat-chip-list>
  <mat-autocomplete #auto1="matAutocomplete" (optionSelected)="selected1($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

A Working StackBlitz Example

【讨论】：

有什么办法让它成为通用函数吗？
@Shivam 是的，但需要考虑一下