延迟加载树数据使用'ag-grid-angular‘服务器端行模型，当多个行展开和折叠时，行数据会变得混乱

Question

问题摘要-

我使用ag-grid-angular和服务器端行模型来延迟加载树数据。但是我有两个不同的API调用来加载父数据和子数据。问题是，当我多次展开和折叠父行时，rowData会变得混乱，就像看到一些空格一样，展开折叠也不能正常工作。

我已经尝试过了-我调试了代码，发现在第一次展开任何父行时，后端调用恰好加载了子行，但下次当我展开相同的父行时，它会从缓存中获取子行的详细信息。此外，在父行和子行之间存在重复的rowIndex。我也尝试清除缓存，但它不起作用。

代码-我的代码与this URL.中给出的代码类似，只是不同的是我们有一个真正的服务器，数据是从父行和子行的两个不同的API调用中动态获取的。而在URL上给出的示例中，它们只有一个data.json文件，父行和子行都是在超时的情况下加载的。

代码看起来有点像下面- HTML看起来像下面这样：

<ag-grid-angular
            #agGrid class="ag-theme-fresh ag-fresh"
            [gridOptions]="agGridOptions"
            [columnDefs]="columnDefs"
            [defaultColDef]="defaultColDef"
            [autoGroupColumnDef]="autoGroupColumnDef"
            [rowModelType]="rowModelType"
            [treeData]="true"
            [animateRows]="true"
            [isServerSideGroup]="isServerSideGroup"
            [getServerSideGroupKey]="getServerSideGroupKey"
            (gridReady)="onGridReady($event)"
          ></ag-grid-angular>

TS文件-//设置网格选项：

        this.agGridOptions = {
              pagination: true,
              paginationPageSize: 100,
              rowHeight: 40,
              columnDefs: [],
              headerHeight: 45,
              suppressContextMenu: true,
              enableSorting: true,
              icons: {
                groupExpanded: '<span class="ag-icon ag-icon-small-down"></span>',
                groupContracted: '<span class="ag-icon ag-icon-small-right"></span>'
              }
            };

            this.columnDefs = agGridConfig.columnDefs;
            this.defaultColDef = {
              filter: true,
              sortable: true,
              resizable: true
            };
            this.autoGroupColumnDef = {
              headerName: 'Name',
              field: 'name',
              width: 350
            };
            this.rowModelType = "serverSide";
            this.isServerSideGroup = function (item) {
              return item.group;
            };
            this.stateService.register('grids', this.gridOptions.name);
            this.getServerSideGroupKey = function (item) {
              let childParam: any = {
                id: item.id,
                date: item.date
              };
              return childParam;
            };

        onGridReady(params: GridOptions) {
            this.agGridRef = params;
            let datasource = this.createServerSideDatasource(this.apiService);
            params.api.setServerSideDatasource(datasource);
          }

        createServerSideDatasource(apiService: ApiService) {
            function ServerSideDatasource(apiService: ApiService) {
              this.apiService = apiService;
            }

            ServerSideDatasource.prototype.getRows = (params) => {
              let parentDataset: any;
              let queryParam: any;
              if (params.request.groupKeys && params.request.groupKeys.length > 0) {
                let parDataSets: any = params.request.groupKeys;
                if (parDataSets && parDataSets.length > 1) {
                  parentDataset = parDataSets[ parDataSets.length - 1 ];
                } else {
                  parentDataset = parDataSets[ 0 ];
                }
                queryParam = this.service.getChildParams(parentDataset);
                apiService.get<any, any>(‘childDatasetURL’, queryParam).subscribe(response => {
                  let rows = response.data;
                  params.successCallback(rows, rows.length);
                });
              } else {
                this.showSpinner = true;
                queryParam = this.service.getParentParams();
                apiService.get<any, any>('parentDatasetURL’, queryParam).subscribe(response => {
                  let rows = response.data;
                  params.successCallback(rows, rows.length);
                  this.showSpinner = false;
                });
              }
            };
            return new ServerSideDatasource(apiService);
          }

    ParentDatasetURL.json - {
          "messages": [],
          "data": [
            {
              "id": 1,
              "name": "parent1"
            },
            {
              "id": 2,
              "name": "parent2"
            }
          ]
        }
    ChildDatasetURL.json - {
          "messages": [],
          "data": [
            {
              "id": 3,
              "name": "parent1child"
            },
            {
              "id": 4,
              "name": "parent2child"
            }
          ]
        }

实际结果-树数据在最初几次展开和折叠都很好，但后来它不能正确地展开和折叠，并且rowData在其间显示一些空白，并且rowIndex完全混乱。

预期的结果-父级应该适当地扩展以延迟加载子数据，即使在多次打开时也是如此。此外，在折叠行时，rowData应该正确地关闭，没有任何混乱。

Answer 1

我也遇到过同样的问题。

我发现这是因为getServerSideGroupKey中返回的值不是唯一的。在确保该值对于所有行都是唯一的之后，问题就解决了。