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

Мне нужно включить кнопку отправки, если установлен одиночный флажок из тега «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;
      }
  }

angular typescript2.0 mat-table angular6 angular-material-6
person Mathi    schedule 14.11.2018    source источник
comment
Создайте демонстрацию stackblitz   -  person Sunil Singh    schedule 14.11.2018
comment
@SunilSingh Добавлен пример ссылки   -  person Mathi    schedule 15.11.2018
comment
@Mathi, пожалуйста, укажите URL-адрес редактора stackblitz   -  person Sivakumar Tadisetti    schedule 15.11.2018
comment
@SunilSingh stackblitz.com/edit/   -  person Mathi    schedule 15.11.2018

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

person Sunil Singh    schedule 15.11.2018
comment
он работает нормально, а также дайте мне знать о следующем решении. слишком ли это правильно или нет. - person Mathi; 15.11.2018
comment
Это то самое решение. - person Sunil Singh; 15.11.2018
comment
Это помогает включать/отключать кнопку на основе выбора флажка. Однако это решение приводит к зависанию экрана на некоторое время для больших записей (например, для одновременного выбора 1 миллиона записей). Он отлично работает для небольших записей. - person Programmer; 13.05.2020

arrow_upward
0
arrow_downward

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

person Mathi    schedule 15.11.2018