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

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

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

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

chips-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)];
  }
}

chips-input-example.css

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

可拆卸的角形材料屑

1 个答案: