0

如果从“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;
      }
  }
4

2 回答 2

2

您应该检查任何复选框中的任何更改。如果任何一个复选框被选中，那么它应该启用提交按钮。添加以下代码段。

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

这是工作演示 - https://stackblitz.com/edit/angular-material2-p8r4pe

于 2018-11-15T05:32:34.907 回答
0

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

于 2018-11-15T05:46:55.633 回答