0
858
VistasMat-chips de material angular que no se configuran para ser removibles
Planteamiento del problema
Mi problema es que cuando estoy usando el mat-chip de Angular Material, parece que no se puede configurar como extraíble a pesar de que lo configuré en verdadero.
Código
<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étodo RemoveOption
removeOption(option: String) { const index = this.options.indexOf(option); if (index >= 0) { this.options.splice(index, 1); } }Explicación del Código
Como puede ver, configuré [removable] en verdadero y (removed) con un método removeOption . Estas cosas no funcionan por alguna extraña razón.
Copié el ejemplo de aquí: https://material.angular.io/components/chips/examples , la sección con el ejemplo se llama: "Chips with Input"
Salida real
Las fichas muestran un pequeño botón de eliminación a la derecha:
Rendimiento esperado
Las fichas con un pequeño botón de eliminación a la derecha:
3 Respuestas
Responde la pregunta0
Tienes que agregar el mat-icon para activar la eliminación. En el ejemplo material tienes:
<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> Este contiene la acción para activar matChipRemove dentro del mat-icon .
Enlace para demostración: https://stackblitz.com/angular/mjygopomxvq?file=src%2Fapp%2Fchips-autocomplete-example.html
0
No puede ver el icono porque falta la sección <mat-icon matChipRemove>cancel</mat-icon> en el código.
Su código debería verse así:
<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>0
te falta la etiqueta del icono.
<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>