javascript - 如何在多种 Material 选择中过滤项目

Question

我想过滤多个 select in Material2 .

为此，我尝试在 mat-option 上使用一个简单的过滤器管道，如下所示:
transform() { ... return value.filter(v => v.value === argtext); }


问题来了

首先，我选择了一些项目。

然后，我按关键字过滤我得到过滤的新项目。

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

这是因为 Material 会在过滤器每次更改选项时构建选项。并每次都清除选择。所以我使用管道的想法对我不起作用。

This is the example with the select and the text here

1. 在我的示例中，选择“额外奶酪”、“香肠”。
2. 在文本框中输入“蘑菇”。
3. 选择此项。 (蘑菇)
4. 您可以看到在下面的配料中只选择了“蘑菇”，而“额外奶酪”、“香肠”已丢失。

感谢阅读/帮助

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