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

Question

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

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

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

我尝试使用 index 将 dataSource 制作为 dataSource[i] 数组，但我无法做到。

我有a working StackBlitz for my issue .

有人可以帮我解决这个问题吗？提前致谢。

Answer 1

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

这是解决方案之一: 每当您调用获取内部数据源数据时，请将数据分配给元素

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 链接:https://stackblitz.com/edit/angular-nested-mat-table-triplenested-bpvhfr?file=app%2Ftable-expandable-rows-example.html