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.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 组件。可悲的是，这是行不通的。

我还看到官方指南说，为了获取远程数据，我应该这样做

有人能指出我正确的方向吗？

Answer 1

值得庆幸的是，找到了答案……从本质上讲，Angular 以随机顺序呈现所有内容，而没有帮助我很好地理解正在发生的事情。我所做的只是数据集.component.html<div class='body-container'>&nbsp; &nbsp; <ag-grid-angular&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; style="width: 1250px; height: 650px;"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; class="ag-theme-balham"&nbsp; &nbsp; &nbsp; &nbsp; [enableFilter]="true"&nbsp; &nbsp; &nbsp; &nbsp; [pagination]="true"&nbsp; &nbsp; &nbsp; &nbsp; (gridReady)="onGridReady($event)"&nbsp; &nbsp; >&nbsp; &nbsp; </ag-grid-angular></div>删除 colDefs 和 rowData 的绑定。相反，当网格准备就绪时......数据集.component.tsimport { Component, OnInit } from '@angular/core';import { Router, ActivatedRoute } from '@angular/router';import { DatasetService } from 'src/app/services/datasets.service';@Component({&nbsp; selector: 'app-dataset',&nbsp; templateUrl: './dataset.component.html',&nbsp; styleUrls: ['./dataset.component.css']})export class DatasetComponent implements OnInit {&nbsp; columnDefs = [];&nbsp; rowData = [];&nbsp; datasetId;&nbsp;&nbsp;&nbsp; constructor(private router: ActivatedRoute,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; private datasetService: DatasetService) {&nbsp; &nbsp; debugger;&nbsp; &nbsp; this.router.queryParams.subscribe(async params => {&nbsp; &nbsp; &nbsp; this.datasetId = params['id'];&nbsp; &nbsp; });&nbsp; &nbsp;}&nbsp; async ngOnInit() {&nbsp;&nbsp; }&nbsp; async onGridReady(params) {&nbsp; &nbsp; await this.datasetService.showDataset(this.datasetId).toPromise().then((res) => {&nbsp; &nbsp; &nbsp; let dataset = JSON.parse(res['data']);&nbsp; &nbsp; &nbsp; const jsonKeys = Object.keys(dataset);&nbsp; &nbsp; &nbsp; jsonKeys.forEach((el) => {&nbsp; &nbsp; &nbsp; &nbsp; this.columnDefs.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headerName: el,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; field: el&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; const maxLength = Object.keys(dataset[jsonKeys[0]]).length;&nbsp; &nbsp; &nbsp; for (let i = 0; i < maxLength; i++) {&nbsp; &nbsp; &nbsp; &nbsp; let row = {}&nbsp; &nbsp; &nbsp; &nbsp; jsonKeys.forEach((el) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row[el] = dataset[el][i];&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; this.rowData.push(row);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; debugger;&nbsp; &nbsp; });&nbsp; &nbsp; params.api.setColumnDefs(this.columnDefs);&nbsp; &nbsp; params.api.setRowData(this.rowData);&nbsp; }}我只是从服务器获取数据，强制函数等待下载，然后设置列和行数据