Ленивая загрузка данных дерева с использованием 'ag-grid-angular' серверной строковой модели, строка данных портится, когда несколько строк разворачиваются и сворачиваются

Question

Краткое описание проблемы -

Я использую ag-grid-angular с серверной моделью рядов для отложенной загрузки данных дерева. Но у меня есть 2 разных вызова API для загрузки родительских данных и дочерних данных. Проблема заключается в том, что когда я раскрываю и сворачиваю родительские строки несколько раз, rowData запутывается, как будто видно некоторое пустое пространство, и разворачивание при развертывании также не работает должным образом.

То, что я уже пробовал - я отладил код и обнаружил, что при раскрытии любой родительской строки в первый раз происходит внутренний вызов, чтобы загрузить дочерние строки, но в следующий раз, когда я раскрываю тот же родительский элемент, он берет дочерние детали из кэша. Также есть дублирование rowIndex между родительскими и дочерними строками. Я также пытался очистить кэш, но это не сработало.

Код - мой код аналогичен тому, что указан в этом URL. Разница лишь в том, что у нас есть реальный сервер, и данные извлекаются динамически из 2 разных вызовов 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 должен правильно закрываться без каких-либо беспорядков.