Mat-Table 数据源在应用于 Angular 中的嵌套网格时被覆盖

Question

我在 Angular 中创建了一个 2 级嵌套 Mat-Table 网格，它可以在其中一次展开多行。在父网格的每一行上单击它调用 API 并加载内部网格的数据。

当我点击第一行时，它会按预期获取数据。

但是当我点击第二行时，它按预期获取了第二行的数据，但是第一内行的值也变得与第二行相同。第一行的数据源值被第二行覆盖。

我尝试使用 index 使 dataSource 成为 dataSource[i] 的数组，但我做不到。

我有 a working StackBlitz for my issue.

谁能帮我解决这个问题？提前致谢。

Answer 1

问题是每次调用 api 获取行的新数据时，内部 userDatasource 都会被覆盖。

这是解决方案之一：每当您调用以获取内部数据源数据时，将数据分配给 element

getProjectDetails(element: any) {
    //console.log(element);
    this.tableService.getInnerData(element.Id).subscribe(res => {
      if (res.length == 0) {
        element['innerDatasource'] = new MatTableDataSource();
      } else {
        console.log(res);
        element['innerDatasource'] = new MatTableDataSource(res);
      }
    });
  }

然后在 html 中使用该值

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

工作 stackblitz link：https://stackblitz.com/edit/angular-nested-mat-table-triplenested-bpvhfr?file=app%2Ftable-expandable-rows-example.html

Answer 2

补充 Drhasti 的答案，另一种选择是允许一次只显示一个“细节”。在这种情况下，您将 .html 更改为仅显示一个

为此，您可以声明一个变量“elementExpanded”

elementExpanded:any;

然后你改变 *ngIf

<div class="example-element-detail" [@detailExpand]="element==elementExpanded"
       *ngIf="element==elementExpanded">
 ...
</div>

还有垫子行中的 (click)

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
    [class.example-element-row]="element.addresses?.length" 
    [class.example-expanded-row]="element==elementExpanded"
    (click)="elementExpanded = elementExpanded==element?null:element">
</tr>

Mat-Table 数据源在应用于 Angular 中的嵌套网格时被覆盖

Mat-Table Data Source getting overridden when applied on nested grids in Angular

angular-material

angular

mat-table