Mat-Selection-List selectAll () не работает

Question

Я пытаюсь реализовать selectAll () и deselectAll (), но он показывает ошибку:

Я использую управляемую шаблоном форму. Вот мой код:

<mat-selection-list name="role" *ngIf='userActions === AssignmentTypesForProductivityAppsEnum.UserRole'
                    [(ngModel)]="assignProductivityApplication.roleIds" #UserRoles="ngModel" multiple required>
                    <mat-list-option #allSelected (click)="selectAll(allSelected.selected)" [value]="0"
                        checkboxPosition="before">All</mat-list-option>
                    <mat-list-option *ngFor="let role of userRoles | searchFilter : searchTerm : 'role'; let i=index"
                        checkboxPosition="before" [value]='role.guId'>
                        {{role.role}}
                    </mat-list-option>
                </mat-selection-list> 

И в файле ts:

@ViewChild('allSelected', {static: true}) private allSelected: MatSelectionList; 
selectAll(checkAll) {
        if (checkAll) {
            this.assignProductivityApplication.UserRoles = [];
            this.assignProductivityApplication.UserRoles.push(... this.userRoles.map(item => item.guId));
            this.allSelected.selectAll();
        }
      }

Answer 1

matSelectionList экспортируется в компоненте mat-selectin-list. Переместить все выбранные переменные шаблона в список выбора матов

Попробуйте:

<mat-selection-list name="role" #allSelected  *ngIf='userActions === AssignmentTypesForProductivityAppsEnum.UserRole'
                        [(ngModel)]="assignProductivityApplication.roleIds" #UserRoles="ngModel" multiple required>
                        <mat-list-option (click)="selectAll(allSelected.selected)" [value]="0"
                            checkboxPosition="before">All</mat-list-option>
                        <mat-list-option *ngFor="let role of userRoles | searchFilter : searchTerm : 'role'; let i=index"
                            checkboxPosition="before" [value]='role.guId'>
                            {{role.role}}
                        </mat-list-option>
</mat-selection-list>

Пример