Angular съемные стружки

Question

Я хочу удалить matChip при нажатии значка отмены
вот мой код

<mat-chip-list>
    <mat-chip
        *ngFor="let user of data.users"
         [removable]="true"
         [selectable]="true"
         (removed)="remove(user.id)">
         {{user.name}}
         <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

Несмотря на то, что [removable]="true" установлен, он не удаляет выбранный чип Я был следуя этому примеру документации

Answer 1

Рабочий пример. Найдите файлы обновлений по указанной выше ссылке (которая доступна в вашем вопросе), как показано ниже, в то время как другие файлы остаются такими же. Если вы хотите проверить рабочий код, попробуйте заменить весь код в соответствующих файлах вашей ссылки приведенным ниже кодом на те же файлы.

ПРИМЕЧАНИЕ: для лучшей читаемости я удалил элемент ввода с помощью добавить функциональность.

пример ввода микросхем. html

<mat-form-field class="example-chip-list">
    <mat-chip-list #chipList aria-label="User selection">
        <mat-chip *ngFor="let user of data.users" [selectable]="selectable" [removable]="removable"
            (removed)="remove(user.id)">
            {{user.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
</mat-form-field>

микросхемы- input-example.ts

import {Component} from '@angular/core';

interface User {
  name: string;
  id: number;
}

interface Data {
  users: User[];
}

@Component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
  styleUrls: ['chips-input-example.css'],
})
export class ChipsInputExample {
  selectable = true;
  removable = true;
  data: Data = {
    users: [
    {name: 'User1', id: 0},
    {name: 'User2', id: 1},
    {name: 'User3', id: 2},
  ]};

  remove(getId: number): void {
    this.data.users = [...this.data.users.filter(({id}) => getId !== id)];
  }
}

чип-пример-ввода. css

.example-chip-list {
  width: 100%;
}