我在材料表中有以下代码,可以对列进行多选。我注意到,每次鼠标移动isAllSelected()
都会被调用数百次。为什么会这样呢?我以为应该只在单击复选框时才调用它]
<mat-table #table [dataSource]="dataSource"> <!-- Checkbox Column --> <ng-container matColumnDef="checkbox"> <mat-header-cell *matHeaderCellDef> <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"> </mat-checkbox> </mat-header-cell> <mat-cell *matCellDef="let priority"> <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(priority) : null" [checked]="selection.isSelected(priority)"> </mat-checkbox> </mat-cell> </ng-container> <!-- Colour Column --> <ng-container matColumnDef="colour"> <mat-header-cell *matHeaderCellDef>Colour</mat-header-cell> <mat-cell *matCellDef="let priority">{{priority?.colour}}</mat-cell> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let priority">{{priority?.name}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let priority; columns: displayedColumns;" class="contact" (click)="selection.toggle(row)"> </mat-row> </mat-table>
和.ts文件
export class AdminPrioritiesSettingsComponent {
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<PriorityDto>(true, []);
displayedColumns = ['checkbox', 'colour', 'name'];
isAllSelected() {
console.log(this.selection.hasValue());
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected() ?
this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}
}
我在材料表中有以下代码,可以对列进行多选。我注意到的是,每次鼠标移动isAllSelected()都会被调用数百次。为什么会这样呢?我以为...
如果我理解您的代码,则可以通过isAllSelected()
调用masterToggle()
函数。 $event
的更改是由鼠标移动触发的,因此调用了masterToggle()
。这是你的问题吗?在这种情况下,您可能想订阅点击事件。