如果使用Angular 4材质表选中任何复选框,则切换按钮

时间:2017-11-24 22:08:00

标签: angular angular-material

我有一张使用'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);
  }
}

0 个答案:

没有答案