$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>javascript - Mat-Selection-List selectAll() not working - Stack Overflow|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - Mat-Selection-List selectAll() not working - Stack Overflow

    javascript - Mat-Selection-List selectAll() not working - Stack Overflow

    matteradmin39PV0评论

    I am trying to implement selectAll() and deselectAll() but it is showing error:

    I am using template-driven form. Here is my code:

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

    And in ts file: 

    @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();
        }
      }

    I am trying to implement selectAll() and deselectAll() but it is showing error:

    I am using template-driven form. Here is my code:

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

    And in ts file: 

    @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
    Share Improve this question asked Jan 23, 2020 at 7:52 Utkarsh AwasthiUtkarsh Awasthi 552 silver badges9 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 3

    matSelectionList is exported in mat-selectin-list ponent. Move allSelected template variable on mat-selection-list

    Try this: 

    <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

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far