Ag-Grid 不渲染从服务器下载的数据

Question

我正在尝试使用 Ag-Grid for Angular 来显示我从后端下载的数据集。
它应该显示表格可视化的组件如下

dataset.component.html

<div class='body-container'>
    <ag-grid-angular 
        style="width: 1250px; height: 650px;" 
        class="ag-theme-balham"
        [enableFilter]="true"
        [pagination]="true"
        [rowData]="rowData" 
        [columnDefs]="columnDefs">
    </ag-grid-angular>
</div>

dataset.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DatasetService } from 'src/app/services/datasets.service';

@Component({
  selector: 'app-dataset',
  templateUrl: './dataset.component.html',
  styleUrls: ['./dataset.component.css']
})
export class DatasetComponent implements OnInit {

  columnDefs = [];

  rowData = [];

  datasetId;

  constructor(private router: ActivatedRoute,
              private datasetService: DatasetService) {
    debugger;
    this.router.queryParams.subscribe(async params => {
      this.datasetId = params['id'];
    });
   }

  async ngOnInit() {
    if (this.datasetId !== null || this.datasetId !== undefined) {
      await this.datasetService.showDataset(this.datasetId).toPromise().then((res) => {
        let dataset = JSON.parse(res['data']);
        const jsonKeys = Object.keys(dataset);
        jsonKeys.forEach((el) => {
          this.columnDefs.push(
            {
              headerName: el, 
              field: el
            });
        });
        const maxLength = Object.keys(dataset[jsonKeys[0]]).length;
        for (let i = 0; i < maxLength; i++) {
          let row = {}
          jsonKeys.forEach((el) => {
            row[el] = dataset[el][i];
          });
          this.rowData.push(row);
        }
        debugger;
      });
    }
  }

  

}

我基本上做的是，因为我不知道我的列和数据会是什么样子，所以在该组件的 init 上实例化它们，以便它们可以传递给 ag-grid 组件。可悲的是，这行不通。
我还看到官方指南说，为了获取远程数据，我应该这样做

<div class='body-container'>
    <ag-grid-angular 
        style="width: 1250px; height: 650px;" 
        class="ag-theme-balham"
        [enableFilter]="true"
        [pagination]="true"
        [rowData]="rowData | async" 
        [columnDefs]="columnDefs">
    </ag-grid-angular>
</div>

但添加异步管道会引发此错误

core.js:6014 ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
    at invalidPipeArgumentError (common.js:6367)
    at AsyncPipe._selectStrategy (common.js:7243)
    at AsyncPipe._subscribe (common.js:7224)
    at AsyncPipe.transform (common.js:7202)
    at Object.eval [as updateDirectives] (DatasetComponent.ngfactory.js:21)
    at Object.updateDirectives (core.js:44780)
    at checkAndUpdateView (core.js:44271)
    at callViewAction (core.js:44637)
    at execComponentViewsAction (core.js:44565)
    at checkAndUpdateView (core.js:44278)

谁能指出我正确的方向？

Answer 1

谢天谢地，找到了答案...本质上，Angular 是按随机顺序渲染所有内容，而没有帮助我很好地理解正在发生的事情。
我所做的只是

dataset.component.html

<div class='body-container'>
    <ag-grid-angular 
        style="width: 1250px; height: 650px;" 
        class="ag-theme-balham"
        [enableFilter]="true"
        [pagination]="true"
        (gridReady)="onGridReady($event)"
    >
    </ag-grid-angular>
</div>

删除 colDefs 和 rowData 的绑定。相反，当网格准备好时......

dataset.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DatasetService } from 'src/app/services/datasets.service';

@Component({
  selector: 'app-dataset',
  templateUrl: './dataset.component.html',
  styleUrls: ['./dataset.component.css']
})
export class DatasetComponent implements OnInit {

  columnDefs = [];

  rowData = [];

  datasetId;

  

  constructor(private router: ActivatedRoute,
              private datasetService: DatasetService) {
    debugger;
    this.router.queryParams.subscribe(async params => {
      this.datasetId = params['id'];
    });
   }

  async ngOnInit() {
 
  }

  async onGridReady(params) {
    await this.datasetService.showDataset(this.datasetId).toPromise().then((res) => {
      let dataset = JSON.parse(res['data']);
      const jsonKeys = Object.keys(dataset);
      jsonKeys.forEach((el) => {
        this.columnDefs.push(
          {
            headerName: el, 
            field: el
          });
      });
      const maxLength = Object.keys(dataset[jsonKeys[0]]).length;
      for (let i = 0; i < maxLength; i++) {
        let row = {}
        jsonKeys.forEach((el) => {
          row[el] = dataset[el][i];
        });
        this.rowData.push(row);
      }
      debugger;
    });
    params.api.setColumnDefs(this.columnDefs);
    params.api.setRowData(this.rowData);
  }

}

我只是从服务器获取数据，强制函数等待下载，然后设置列和行数据