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;
  }
}

Answer 2

mat-select-trigger专门用于自定义选择的显示。在您的情况下，您需要做一些工作来从实际选择中滤除“ 0”，并在未选择某个项目时取消选择“全部”，但是通常您可以执行以下操作将显示更改为All选中“全部”复选框时

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

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

带有全选选项的角材料多选下拉列表

2 个答案: