web-dev-qa-db-fra.com

Angular Matière mat-chips non paramétrable pour être amovible

Énoncé du problème

Mon problème est que lorsque j'utilise Angular Material's mat-chip, il semble qu'il ne peut pas être défini comme amovible même si je l'ai défini sur 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>

Méthode RemoveOption 

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

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

Explication du code

Comme vous pouvez le voir, j'ai défini [removable] à vrai et (removed) avec une méthode removeOption. Ces choses ne fonctionnent pas pour une raison étrange.

J'ai copié l'exemple d'ici: https://material.angular.io/components/chips/examples , la section avec l'exemple est nommée: "Chips with Input"

Sortie réelle

Les puces ne montrent pas de petit bouton de suppression sur la droite:

enter image description here

Sortie attendue

Les puces avec un petit bouton de suppression à droite:

enter image description here

htmlangularangular-material
4
Compiler v2

Vous ne pouvez pas voir l'icône car la section <mat-icon matChipRemove>cancel</mat-icon> est absent du code.

Votre code doit ressembler à ceci:

<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>
2
Matheus Cassol

il vous manque la balise icon.

<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>
2
B. Diarra