Material2多选组件过滤时丢失已选内容的问题求助

嘿，我完全懂你遇到的这个头疼问题——用管道过滤mat-option时，之前选中的选项莫名其妙消失，这本质上是因为Angular的纯管道特性和Material组件的渲染逻辑冲突了。

问题根源 #

你用的管道默认是纯管道，每次过滤关键词变化时，管道都会返回一个全新的数组实例（即使元素内容和之前一样）。Material的多选组件会把这些新数组里的选项当成完全陌生的新元素，之前选中的是旧数组里的元素引用，组件自然就识别不出来，导致选中状态被清空。

最优解决方案：组件内手动处理过滤（替代管道） #

不要用管道做过滤，而是在组件类里维护原始选项数组和过滤后的数组，这样能保留原始元素的引用，确保选中状态和FormControl绑定的value始终匹配。

这里给你一个完整的示例代码：

组件类代码

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

// 定义你的选项类型
interface ToppingOption {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-filtered-multi-select',
  template: `
    <mat-form-field appearance="fill">
      <mat-label>披萨配料</mat-label>
      <!-- 过滤输入框 -->
      <input 
        matInput 
        placeholder="搜索配料..." 
        [(ngModel)]="filterKeyword"
      >
      <!-- 多选选择器 -->
      <mat-select [formControl]="selectedToppings" multiple>
        <mat-option 
          *ngFor="let topping of filteredToppings" 
          [value]="topping.value"
        >
          {{topping.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <!-- 展示选中的选项 -->
    <p>已选中: {{selectedToppings.value.join(', ')}}</p>
  `,
})
export class FilteredMultiSelectComponent {
  // 绑定多选选中状态的FormControl
  selectedToppings = new FormControl<string[]>([]);
  // 过滤关键词
  filterKeyword = '';

  // 原始的完整选项列表（保留所有元素引用）
  private allToppings: ToppingOption[] = [
    { value: 'extra-cheese', viewValue: 'Extra cheese' },
    { value: 'sausage', viewValue: 'Sausage' },
    { value: 'mushroom', viewValue: 'Mushroom' },
    { value: 'pepperoni', viewValue: 'Pepperoni' },
    { value: 'olives', viewValue: 'Olives' },
  ];

  // 计算属性：返回过滤后的选项（基于原始数组，保留引用）
  get filteredToppings(): ToppingOption[] {
    if (!this.filterKeyword.trim()) {
      return this.allToppings;
    }
    const lowerKeyword = this.filterKeyword.toLowerCase();
    return this.allToppings.filter(topping => 
      topping.viewValue.toLowerCase().includes(lowerKeyword)
    );
  }
}

为什么这个方案有效？ #

这个方法里，filteredToppings是从**原始数组allToppings**中过滤出的元素，返回的是原始元素的引用，而不是新创建的对象。当你过滤后选中新选项，之前选中的元素依然存在于原始数组中，FormControl绑定的是它们的value值，所以组件能正确识别并保留所有选中状态。

不推荐的方案：改用非纯管道 #

如果你非要用管道实现，也可以把管道改成非纯管道（设置pure: false），这样管道不会因为输入数组引用变化才执行，而是每次变更检测都会运行。但我强烈不推荐这种方式——非纯管道会频繁触发，当选项数量多的时候会严重影响性能。

示例非纯管道代码：

import { Pipe, PipeTransform } from '@angular/core';
import { ToppingOption } from './filtered-multi-select.component';

@Pipe({
  name: 'toppingFilter',
  pure: false // 关键：改成非纯管道
})
export class ToppingFilterPipe implements PipeTransform {
  transform(options: ToppingOption[], keyword: string): ToppingOption[] {
    if (!keyword.trim()) return options;
    const lowerKeyword = keyword.toLowerCase();
    return options.filter(opt => opt.viewValue.toLowerCase().includes(lowerKeyword));
  }
}

验证你的操作场景 #

按照你的测试步骤：

1. 先选中"Extra cheese"、"Sausage"
2. 输入"Mushroom"并选中它
3. 此时selectedToppings.value会包含['extra-cheese', 'sausage', 'mushroom']，所有选中项都被保留，不会丢失。

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