亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Ag-Grid 未呈現從服務器下載的數據

Ag-Grid 未呈現從服務器下載的數據

呼如林 2022-12-02 17:03:24
我正在嘗試使用 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 組件??杀氖牵@是行不通的。我還看到官方指南說,為了獲取遠程數據,我應該這樣做有人能指出我正確的方向嗎?
查看完整描述

1 回答

?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

值得慶幸的是,找到了答案……從本質上講,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);

  }


}

我只是從服務器獲取數據,強制函數等待下載,然后設置列和行數據


查看完整回答
反對 回復 2022-12-02
  • 1 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號