如何移除mat-list-option？基于选择菜单动态控制mat-selection-list选项

当然可以实现你想要的效果！你之前只在内部<span>上用*ngIf，只会隐藏选项的文本内容，但<mat-list-option>元素本身依然留在DOM中，所以看起来选项还在。要完全移除不匹配的选项，你有两种常用的方式：

方式1：直接在<mat-list-option>上使用*ngIf #

把*ngIf指令直接加到<mat-list-option>上，这样当条件不满足时，整个选项元素会被从DOM中移除：

<mat-selection-list>
  <!-- 假设items是你的数据源，matchFilter(item, selectedFilter)是判断是否匹配的方法 -->
  <mat-list-option 
    *ngFor="let item of items" 
    *ngIf="matchFilter(item, selectedFilter)">
    <span>{{item.name}}</span>
  </mat-list-option>
</mat-selection-list>

在组件里你需要实现matchFilter方法，比如：

selectedFilter: string; // 绑定自你的选择菜单

matchFilter(item: any, filter: string): boolean {
  // 根据你的业务逻辑判断是否匹配，比如item.type === filter
  return item.type === filter;
}

方式2：提前过滤数据源（更推荐） #

如果数据量较大，或者需要频繁切换筛选器，更高效的方式是在组件里提前过滤好符合条件的列表，再渲染到模板中：

组件代码：

allItems: any[]; // 原始完整数据源
filteredItems: any[]; // 过滤后的数据源
selectedFilter: string;

// 当筛选器变化时更新过滤列表
onFilterSelected(filter: string) {
  this.selectedFilter = filter;
  // 根据筛选条件过滤数组
  this.filteredItems = this.allItems.filter(item => {
    // 这里写你的匹配逻辑，比如筛选"猫"时只保留type为cat的项
    return item.type === filter;
  });
}

模板代码：

<!-- 你的选择菜单 -->
<mat-select (selectionChange)="onFilterSelected($event.value)">
  <mat-option value="cat">猫</mat-option>
  <mat-option value="snake">蛇</mat-option>
</mat-select>

<!-- 渲染过滤后的列表 -->
<mat-selection-list>
  <mat-list-option *ngFor="let item of filteredItems">
    <span>{{item.name}}</span>
  </mat-list-option>
</mat-selection-list>

这种方式的好处是：模板更简洁，Angular不需要在每个选项上执行*ngIf判断，性能更优，而且你可以在组件里更灵活地处理过滤逻辑。

为什么之前的方式不行？ #

你之前只在<span>上用*ngIf，只会隐藏文本，但<mat-list-option>作为容器元素依然存在DOM中，所以视觉上可能还是会有空的选项占位。把*ngIf移到<mat-list-option>上，就能彻底移除整个选项。

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