应用于 Angular 中的嵌套网格时，Mat-Table 数据源被覆盖 [英] Mat-Table Data Source getting overridden when applied on nested grids in Angular

问题描述

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

I have created a 2 level nested Mat-Table grid in Angular in which it can expand multiple rows at a time. On each row click from the parent grid it calls an API and loads the data for the inner grid.

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

When I click on the first row, it fetches the data as expected.

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

But when I click on the second row, it fetches the data for the second row as expected, but the value of the 1st inner row also becomes the same as the second one. The datasource value of the 1st row is overridden by the second one.

我尝试使用 index 使 dataSource 成为 dataSource[i] 的数组，但我无法做到.

I tried making dataSource an array of dataSource[i], using the index, but I was unable to.

我有 针对我的问题的有效 StackBlitz.

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

Can anyone help me on this? Thanks in advance.

推荐答案

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

The problem is that inner userDatasource is getting overridden everytime you make an api call to get new data for the row.

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

Here is one of the solution: Whenever you make a call to fetch inner datasource data, assign the data to 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 中，使用该值

Then in the html, use that value

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

工作堆栈闪电战链接:https://stackblitz.com/edit/angular-nested-mat-table-triplenested-bpvhfr?file=app%2Ftable-expandable-rows-example.html

这篇关于应用于 Angular 中的嵌套网格时，Mat-Table 数据源被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！