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

Question

问题的摘要 -

我使用的是使用服务器端行模型的Ag-Grid-angular来加载树数据。但是我有2个不同的API调用来加载父数据和子女数据。问题是，当我扩展和崩溃时，父行多次会像看到一些空白一样混乱，并且展开崩溃也无法正常工作。

我已经尝试过的东西 - 我调试了代码，发现在第一次扩展任何父行时，后端调用恰好加载子行，但是下次我扩展同一父级时，将从缓存中获取子女的详细信息。另外，父母和子行之间也有rowindex的重复。我也试图清除缓存，但它不起作用。

代码 - 我的代码类似于此URL中给出的代码。仅仅是我们拥有一台真实的服务器，并且数据从2个不同的API调用父母和子行中动态获取。尽管在URL上给出的示例中，它们有一个数据。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中返回的值并非唯一。在确保该值对所有行的真正唯一之后，解决了问题。