复选框的主切换在多个扩展的 Mat-Table 行中不起作用 [英] Master Toggle for checkbox not working in multiple expanded Mat-Table rows

问题描述

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

I have a multiple row expandable mat table grid , which fetches data from different API's on each row click . I have a checkbox selection in every row for the inner grid , but the master toggle for the inner grid checkbox doesnt work .

但它适用于外部网格.

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

我的 HTML 片段 -

A snippet of my 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)
            );
      }

我有一个可用的 Stackblitz 来重现这个问题 - 谁能指导我解决这个问题?提前致谢.

I have a working Stackblitz to reproduce this issue - Can anyone guide me through this ? Thanks in advance .

推荐答案

问题在于您没有管理 userSelection 的列表，因为您将拥有尽可能多的 userSelection 作为包含数据的扩展行数.

The issue is the fact that you don't manage a list of userSelection because you will have as many userSelection as the number of expended rows with data.

这是一个解决问题的堆栈闪电战.

这篇关于复选框的主切换在多个扩展的 Mat-Table 行中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！