Раскрывающийся список угловых материалов с возможностью выбора всех параметров

Question

Я использую угловой выбор материала с опцией select all.
См. Ссылку на стек стека ниже.
https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html
В настоящее время все выбранные параметры отображаются в текстовом поле множественного выбора, что является желаемым поведением. ,
Я хочу отображать только «весь» текст, когда я выбираю все опции, вместо того, чтобы показывать каждый элемент в списке.
Я пробовал несколько способов с использованием ссылочной переменной шаблона, но она не работает. Пожалуйста, помогите в этом.

Answer 1

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>

Фактическая проверка состояния будет зависеть от того, как вы реализуете выбор всех элементов в вашей модели.

Answer 2

Вы можете использовать событие 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;
  }
}