Angular 带“全选”选项的“角度材质多选”下拉列表

我使用的是带全选选项的角度材质multiselect。
请参阅下面的stackblitz链接。

当前，我选择的任何选项都会显示在multiselect的文本框中，这是所需的行为

---

当我选择所有选项时，我只想显示“所有”文本，而不是显示列表中的每一项。
我尝试了几种使用模板引用变量的方法，但它不起作用。请在此方面提供帮助。

您可以使用

onSelectionChange

元素上的

mat option

事件检查是否选中了所有选项，然后将“all”复选框嵌套到

ngIf

在app.component.html中：

{{filters.value}
全部的

在app.component.ts中添加以下内容：

更改（事件）{
if（event.isUserInput）{
console.log（event.source.value，event.source.selected）；
//Todo:检查是否选中了所有字段
this.allChecked=true；
}
}

mat select触发器专门用于定制选择的显示。在您的情况下，您需要做一些工作，从实际选择中筛选出“0”，并在取消选择项目时取消选择“全部”，但通常您可以执行以下操作，在选中“全部”复选框时将显示更改为

All

：

<mat-select ...>
  <mat-select-trigger>
    {{searchUserForm.controls.userType.value.length >= 4 ? 'All' : searchUserForm.controls.userType.value}}
  </mat-select-trigger>
  ...
</mat-select>

{{searchUserForm.controls.userType.value.length>=4？'All'：searchUserForm.controls.userType.value}
...

---

实际条件检查将取决于您如何实现对模型中所有项目的选择。

这是一个完全相同的问题，答案不完全相同-此用户希望知道如何显示“全部”，而不是所选项目的列表。