Как я могу включить кнопку отмечен один флажок в таблице мат?

Question

Мне нужно включить кнопку отправки, если установлен один флажок из тега "td", и она работает нормально, если установлен главный флажок из тега "th".Использую угловой материал.заранее спасибо.

Найдите ссылку на Stackblitz: https://angular -material2-5cgxqf.stackblitz.io /

app.component.html

<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>
</table>
/**Button*/

<button [disabled]="isButtonEnable">Submit</button>

app.component.ts

import {SelectionModel} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

isButtonEnable:boolean =true;
/** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    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() {
      if(this.isAllSelected()){
              this.selection.clear();
              this.isButtonEnable = true;
          }else{
              this.dataSource.data.forEach(row => this.selection.select(row));
              this.isButtonEnable = false;
      }
  }

Answer 1

app.component.html

<mat-checkbox (click)="SingleSelection(); $event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)">
          </mat-checkbox>

app.component.ts

SingleSelection(){
    const numSelected = this.selection.selected.length;
      numSelected <= 0 ? this.isButtonEnable = false : this.isButtonEnable = true;
  }

это также работает нормально, и, пожалуйста, найдитессылка: https://stackblitz.com/edit/angular-material2-p8r4pe?file=app%2Fapp.component.ts

Answer 2

Вы должны проверить наличие изменений в любом флажке. Если какой-либо из флажков установлен, он должен включить кнопку отправки. Добавьте приведенный ниже фрагмент.

  constructor(){
    this.selection.changed.subscribe(item=>{
      this.isButtonEnable = this.selection.selected.length == 0;
    })
  }

Вот рабочая демонстрация - https://stackblitz.com/edit/angular-material2-p8r4pe