Ag-Grid 未呈现从服务器下载的数据

Question

我正在尝试使用 Ag-Grid for Angular 来显示我从后端下载的数据集。它应该显示表格可视化的组件如下数据集.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>数据集.component.tsimport { 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 组件。可悲的是，这是行不通的。我还看到官方指南说，为了获取远程数据，我应该这样做有人能指出我正确的方向吗？

Answer 1

值得庆幸的是，找到了答案……从本质上讲，Angular 以随机顺序呈现所有内容，而没有帮助我很好地理解正在发生的事情。

我所做的只是

数据集.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 的绑定。相反，当网格准备就绪时......

数据集.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);

  }

}

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