如何过滤多个材料选择中的项目

Question

我想在 Material2 中过滤多个 选择。

为此，我尝试在mat-option类似的东西上使用一个简单的过滤器管道： transform() { ... return value.filter(v => v.value === argtext); }

问题来了，

首先，我选择一些项目。

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

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

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

这是带有选择和文本的示例

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>

更新的 stackblitz 示例