如何移除<mat-chip-option>切换效果并实现单选保留选中

要实现你要的过滤器效果——点击芯片首次选中后，再次点击不取消，只有点击其他芯片才切换选中状态，可以通过手动控制选中状态来绕过组件默认的切换逻辑，具体步骤如下：

1. 组件类中管理选中状态 #

在组件里定义变量存储当前选中的芯片值，再写一个点击处理方法控制选中逻辑：

selectedFilter: string | null = null;

onChipClick(filter: string): void {
  // 只有点击的不是当前选中项时，才更新选中状态
  if (this.selectedFilter !== filter) {
    this.selectedFilter = filter;
  }
}

2. 修改模板中的Chip配置 #

去掉<mat-chip-option>默认的点击切换行为，手动绑定自定义点击方法，通过[selected]绑定选中状态：

<mat-chip-option 
  *ngFor="let filter of filters"
  [selected]="selectedFilter === filter"
  (click)="onChipClick(filter)"
>
  {{ filter }}
</mat-chip-option>

注：这里的filters是你自己定义的芯片选项数组，比如filters = ['Accent fish', '选项A', '选项B'];

3. 样式自动生效 #

因为我们通过[selected]手动控制了选中状态，Angular Material会自动为选中的芯片添加mat-mdc-chip-selected mdc-evolution-chip--selected类，组件自带的选中样式会正常显示，无需额外修改CSS。

这样设置后，点击同一芯片时不会取消选中，只有点击其他芯片才会切换选中项，完全适配过滤器的使用需求。

内容的提问来源于stack exchange，提问作者user977263