角材料垫芯片未设置为可拆卸

Question

问题陈述

我的问题是，当我使用 Angular Material's 时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]为 true 并(removed)使用了一种removeOption方法。由于某些奇怪的原因，这些东西不起作用。

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

---

实际产量

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

---

预期产出

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

Answer 1

您必须添加mat-icon以触​​发删除。在材料示例中，您有：

   <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