复选框的主切换在多个展开的 Mat-Table 行中不起作用

Question

我有一个多行可扩展垫 table 网格，它在每行点击时从不同的 API 获取数据。我在内部网格的每一行都有一个复选框选择，但是内部网格复选框的主切换不起作用。

但它适用于外部网格。

根据 ID，我的内部网格数据源值对于每一行都是不同的，我猜是因为这个。我尝试将 ID 传递给切换功能，但它没有用。

我的片段 HTML -

<mat-table [dataSource]="usersdataSource[element.Id]" multiTemplateDataRows matSort>

                <ng-container matColumnDef="select">
                <mat-header-cell class="w-40" *matHeaderCellDef>
                        <mat-checkbox color="primary"
                                (change)="$event ? UserMasterToggle() : null"
                                [checked]="userSelection.hasValue() && isAllUserSelected()"
                                [indeterminate]="userSelection.hasValue() && !isAllUserSelected()">
                        </mat-checkbox>
                </mat-header-cell>

我的TS -

  isAllUserSelected() {
const numSelected = this.userSelection.selected.length;
const numRows = this.usersdataSource.data.length;
return numSelected == numRows;
  }

     /** Selects all rows if they are not all selected; otherwise clear selection. */
      UserMasterToggle() {
        this.isAllUserSelected()
          ? this.userSelection.clear()
          : this.usersdataSource.data.forEach(row =>
              this.userSelection.select(row)
            );
      }

I have a working Stackblitz to reproduce this issue - 谁能指导我解决这个问题？提前致谢。

Answer 1

问题在于您没有管理 userSelection 的列表，因为您将拥有与扩展数据行数一样多的 userSelection。

这里是working stackblitz with the issue fixed.

复选框的主切换在多个展开的 Mat-Table 行中不起作用

Master Toggle for checkbox not working in multiple expanded Mat-Table rows

angular-material

angular