angular - 带有取消图标的 matChip 无法移除并以不同方式显示

Question

实际：无法移除芯片 预期：点击 x 即可移除芯片

我做了以下动作：

1. 在主 app.module 中导入 MatIconModule 和 MatChipsModule。带有我的代码的模块是子模块/延迟加载。我还需要在子组件中导入 MatIconModule 才能使图标正常工作。

从“@angular/material/chips”导入 { MatChipsModule }；

2. 在 index.html 中添加了以下内容

链接 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"

3. 在 style.css 中添加了 ff 并更新了 angular.json 文件。

@import "@angular/material/prebuilt-themes/indigo-pink.css";

"styles": [ "src/assets/css/style.css"] //angular.json

4. 安装锤

Answer 1

这对我有用..

1. 正确安装 Angular Material https://material.angular.io/guide/getting-started

2. 在 styles.css 中导入字体系列

   @import url(" https://fonts.googleapis.com/icon?family=Material+Icons ");

3. 此代码将完成其余的工作

    <mat-chip-list>
      <mat-chip  (removed)="remove(event)"
        (click)="selected(event)">
         <i matChipRemove class="fa fa-times-circle"></i>
      </mat-chip>