带有全选选项的角材料多选下拉菜单

Question

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

Answer 1

您可以在onSelectionChange元素上使用mat-option事件来检查是否已选中所有选项，然后将“所有”复选框嵌套到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;
  }
}