html - Angular Material 垫芯片未设置为可拆卸

Question

问题陈述

我的问题是，当我使用 Angular Material 的 mat-chip 时，即使我将其设置为 true，它似乎也无法设置为可移动。

代码

<mat-form-field>
 <input matInput [matChipInputFor]="chipList" (matChipInputTokenEnd)="addOption($event)"
type="number" maxlength="4" placeholder="Enter an amount here">
 </mat-form-field>

<mat-chip-list>
<mat-chip #chipList *ngFor="let option of options" [removable]="true"
(removed)="removeOption(option)">{{option}}
</mat-chip>
</mat-chip-list>

RemoveOption 方法

removeOption(option: String) {
    const index = this.options.indexOf(option);

    if (index >= 0) {
      this.options.splice(index, 1);
    }
  }

代码说明

如您所见，我已使用 [removable] 方法将 (removed) 设置为 true 和 removeOption。由于某些奇怪的原因，这些东西不起作用。

我从这里复制了示例: https://material.angular.io/components/chips/examples ，示例部分命名为:“带输入的芯片”

实际输出

芯片在右侧显示了很多删除按钮:



预期输出

右边有一个小的移除按钮的芯片:

Answer 1

您必须添加 mat-icon 才能触发删除。在 Material 示例中，您有:

   <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>

这包含在 matChipRemove 中触发 mat-icon 的操作。

演示链接: https://stackblitz.com/angular/mjygopomxvq?file=src%2Fapp%2Fchips-autocomplete-example.html