我有一张使用'mat-table'的表格。此表有一个带复选框的列。如果选中任何复选框,则应在此表外部显示一个按钮,如果未选中所有复选框,则应禁用该按钮。还有一个标题级别复选框,用于选中/取消选中此表中的所有复选框,并且我可以使用属性绑定到isAllRowsSelected来完成。
我试图找出如何实现这一目标。 HTML:
<mat-grid-tile>
<button mat-raised-button #btnDelete style="margin-right:20px" (click)="delete()" (disabled)="test()">Delete</button>
</mat-grid-tile>
<mat-table #table [dataSource]="dealListDataSource" matSort>
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="isAllRowsSelected = !isAllRowsSelected;"></mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox color="primary" [checked]="isAllRowsSelected"></mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
打字稿:
export class TestComponent implements OnInit {
private testDataSource: DealListDataSource;
isAllRowsSelected = false;
displayedColumns = ['id',
'select',
'status'];
ngOnInit() {
this.dealListDataSource = new DealListDataSource(this.dealListService, this.sort);
}
}