1

我正在使用 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>`

我如何让它仅适用于特定的输入字段？

4

2 回答 2

1

我认为您只需要更改 mat-chip-list 的 ID。

所以在你第一次设置id

<mat-chip-list #chipList>

然后在你第二次设置 id

<mat-chip-list #chipList2>

然后你设置

[matChipInputFor]="chipList"

和[matChipInputFor]="chipList2"

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

于 2019-06-28T11:14:22.300 回答
0

您必须为每个芯片列表使用不同的列表，并且还必须为每个芯片列表使用两个不同的属性[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>

一个有效的 StackBlitz 示例

于 2018-12-20T06:16:24.747 回答