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

Question

Problem Statement

My problem is that when I am using Angular Material's mat-chip , it seems it cannot be set as removable even though I set it to true.

---

Code

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

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

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

---

Explanation of Code

As you can see, I have set [removable] to true and (removed) with a removeOption method. These things do not work for some strange reason.

I copied the example from here: https://material.angular.io/components/chips/examples , the section with the example is named: "Chips with Input"

---

Actual Output

The chips show no little remove button on the right:

---

Expected Output

The chips with a little remove button on the right:

Answer 1

You have to add the mat-icon to trigger the removal. In the material example you have:

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

This contains the action to trigger matChipRemove inside the mat-icon .

Link for demo: https://stackblitz.com/angular/mjygopomxvq?file=src%2Fapp%2Fchips-autocomplete-example.html

Answer 2

You're not able to see the icon because the section <mat-icon matChipRemove>cancel</mat-icon> is missing from the code.

Your code should look like this:

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

Answer 3

you are missing the icon tag.

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

Noticed that if the mat-icon or any other element that does matChipRemove has style "pointer-events: none;" then click on the mat-icon (X) doesn't remove the chip. The chip still can be removed by the keyboard backspace button. Solution - set "pointer-events: auto;"