【问题标题】:Mat-Selection-List selectAll() not workingMat-Selection-List selectAll()不起作用
【发布时间】:2020-05-09 10:37:51
【问题描述】:

我正在尝试实现 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();
        }
      }

【问题讨论】:

    标签: javascript angular typescript angular-material angular8


    【解决方案1】:

    matSelectionList 在 mat-selectin-list 组件中导出。在 mat-selection-list 上移动 allSelected 模板变量

    试试这个:

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

    Example

    【讨论】:

    • 我在 selectAll(checkAll) 中得到未定义的 allSelected 属性。我不知道为什么会这样。
    • 这里是这个问题的 stackblitz 示例:link
    • 将 ViewChild 静态属性更改为 false
    猜你喜欢
    • 2021-10-13
    • 1970-01-01
    • 2018-11-03
    • 2021-09-02
    • 1970-01-01
    • 1970-01-01
    • 2019-05-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多