Question

我想过滤多个 info。

要做到这一点，我尝试在content上使用简单的过滤管道： !

这是问题，

首先，我选择一些项目。

然后，我按关键字过滤我过滤了新项目。

现在我可以看到我以前的选择已经丢失。

这是因为每次过滤器更改它们时，Material都会构建选项。并且每次也清除选择。所以我使用烟斗的想法对我来说不起作用。

select in Material2

在我的例子中选择“Extra cheese”，“Sausage”。
在文本框中输入“Mushroom”。
选择此项目。（蘑菇）
你可以在下面的配料中看到只选择了“蘑菇”和“额外的奶酪”，“香肠”已经丢失。

感谢您阅读/帮助

Answer 1

您可以根据搜索输入值隐藏选项，而不是使用管道过滤toppingList。

将此添加到style.scss：

.hide {
  display: none;
}

在您的组件HTML中：

   <mat-form-field>
    <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [class.hide]="text.value !== '' && topping.value.toLowerCase().indexOf(text.value.toLowerCase()) === -1" [value]="topping">
        {{topping.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>

Updated stackblitz example

如何过滤多种材质中的项目选择

1 个答案: