如何检查表(mat-table)中的全部使用或取消选中的使用(mat-checkbox)

时间:2018-11-15 11:53:52

标签: angular checkbox checkboxlist

我要全部选中或取消选中

<div class="row col-lg-12 col-md-4 col-sm-12">
  <div class="col-lg-7 col-md-8 col-sm-12 table-responsive-sm table-responsive-lg table-responsive-xl">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

      <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <!-- id Column -->
      <!-- <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID | </th>
        <td mat-cell *matCellDef="let Userdevice"> {{Userdevice.ID}} </td>
      </ng-container>-->

      <!-- Name Column -->
      <ng-container matColumnDef="username">
        <th mat-cell *matHeaderCellDef> UserName    </th>
          <td mat-cell *matCellDef="let Userdevice"> {{Userdevice.UserName}}</td>
      </ng-container>

      <!-- deviceid Column -->
      <ng-container matColumnDef="deviceid">
        <th mat-cell *matHeaderCellDef> DeviceID </th>
        <td mat-cell *matCellDef="let Userdevice"> {{Userdevice.DeviceID}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
        (click)="selection.toggle(row)">
      </tr>
    </table>
  </div>
</div>

0 个答案:

没有答案