Angular material 筹码可移除

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"，也不会移除点击的筹码 I have been following this docs example

Answer 1

工作示例。请从上面的link（在您的问题中可用）中找到更新文件，如下所示，而其他文件保持不变。如果您想检查工作代码，请尝试将 link 的各个文件中的整个代码替换为相同文件的以下代码。

注意：为了更好的可读性，我删除了具有添加功能的输入元素。

芯片输入-example.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>

芯片输入-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)];
  }
}

芯片输入-example.css

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

Angular material 筹码可移除

Angular material chips removable

javascript

angular

angular7

angular-material-7