带有全选选项的 Angular Material 多选下拉列表

Question

我正在使用带全选选项的 Angular Material 多选。
请参阅下面的 stackblitz 链接。
https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html
目前，我选择的任何选项都会出现在多选的文本框中，这是所需的行为。
当我选择所有选项时，我只想显示“全部”文本，而不是显示列表中的每一项。
我尝试了几种使用模板引用变量的方法，但它不起作用。请对此提供帮助。

Answer 1

您可以在 mat-option 元素上使用 onSelectionChange 事件来检查是否所有选项都被选中，然后将您的“全部”复选框嵌套到 ngIf

在 app.component.html 中:

<mat-select placeholder="User Type" formControlName="userType" multiple>
  <mat-option *ngFor="let filters of userTypeFilters" (onSelectionChange)="change($event)" [value]="filters.key">
    {{filters.value}}
  </mat-option>
  <div *ngIf="allChecked">
    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
  </div>
</mat-select>

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

change(event) {
  if(event.isUserInput) {
    console.log(event.source.value, event.source.selected);
    // Todo: check if all field are checked
    this.allChecked = true;
  }
}