如果在 Angular 2+ 中选中了三个以上，则禁用复选框

Question

I've created a table in angular material and i will compare the data of three rows. Now i have to disable all other checkboxes if i have three boxes on checked. I know i could use the [disabled] state from the material table, but if i checked three boxes, all boxes are disabled than. But i have to deselect the checked boxes so i could change the collection.

How could i write a if else statement?

Working tree

Answer 1

Just add !selection.isSelected(row) in the disabled state :

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

Working Demo