Question

我已经修改（masterToggle）原始的Angular Material Table example-Stackblitz，以便在选择了某些行之后，主切换开关应取消选择所有（而不是全选-与Gmail行为类似））。

它可以正常工作，但是标题中的主切换复选框未按预期工作-单击取消选择后-逻辑取消选择了选定的行，但是主切换复选框未反映模型值：

[checked]="selection.hasValue() && isAllSelected()"

如果表达式的计算结果为false，我希望主切换复选框不会被选中（见下图）。

我想这与动画有关。

此处的修改示例：Stackblitz

masterToggle() {
    // if there is a selection then clear that selection
    if (this.isSomeSelected()) {
      this.selection.clear();
    } else {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
    }
}

Answer 1

当前，您没有在单击复选框时更新this.selection.selected.length，因此它不能正确更新长度。

您需要以其他方式显式更改mat复选框的状态，否则它将不断切换，因此我已使用模板引用到matcheck框取消选中

单击p-cell时，

isSomeSelected（）方法未执行，以检查masterToggle（）是否正确，如果您必须单击matcheckbox时触发此方法，请检查我的解决方案我已在change事件中添加了此功能，以便其正常运行

<td mat-cell *matCellDef="let row" >
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null;isSomeSelected()"
                    [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>

我已修改您的代码，请检查：https://stackblitz.com/edit/angular-rmqg54-7rjmaj

Answer 2

我遇到了同样的问题，我的解决方案是更改主切换器的checked状态，以便在选择任何项目时都为true，而不仅仅是在选择所有项目时才为真（StackBlitz）

    <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>

当选择了适当的项目子集indeterminate为true时，因此实际上不会显示该支票。但是，正如@Chellappan所提到的，该复选框会在每次单击时切换检查状态（请参见source），因此，根据需要，该复选框将在下次单击时转换为未检查状态。

  /**
   * Event handler for checkbox input element.
   * Toggles checked state if element is not disabled.
   * Do not toggle on (change) event since IE doesn't fire change event when
   *   indeterminate checkbox is clicked.
   * @param event
   */
  _onInputClick(event: Event) {
    [...]
    this._transitionCheckState(
          this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
    [...]
  }

不幸的是，这会将代码耦合到可以实现的细节上。另一个可能的解决方法是从复选框的单击处理程序返回false以防止对Angular单击处理程序进行评估，但是在我的测试键盘中，复选框上的交互不会触发复选框的单击处理程序，但是会触发Angular的单击处理程序，因此该错误将继续存在。

一个真正但涉及的解决方案将MAT_CHECKBOX_CLICK_ACTION设置为noop并实施自定义点击操作

Answer 3

public dataSourceNew
public selection=new SelectionModel<leadsPendingUser>(true, []);

abc(){
     //after your api call 
     if(res.success==true){
        const ELEMENT_DATA: leadsPendingUser[]=this.PartnerManagementModel.data
        this.dataSourceNew = new MatTableDataSource<leadsPendingUser>(ELEMENT_DATA);

        //** the only change you need to do is below line **//
        this.selection = new SelectionModel<leadsPendingUser>(true, []);

        this.dataSourceNew.paginator = this.paginator;
        this.dataSourceNew.sort = this.sort;
     }
}

带有选择的角材料表-主开关应先取消选择

3 个答案: