Angular Материал матовой стружки не устанавливается съемным

Question

Постановка проблемы

Моя проблема в том, что когда я использую Angular Материал 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(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, раздел с примером называется: "Chips with Input"

---

Фактический вывод

На чипах справа показана небольшая кнопка удаления:

---

Ожидаемый результат

Фишки с небольшой кнопкой удаления справа:

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

Answer 2

у вас отсутствует значок тега.

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

Answer 3

Вы не можете видеть значок, потому что в коде отсутствует раздел <mat-icon matChipRemove>cancel</mat-icon>.

Ваш код должен выглядеть следующим образом:

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