1 回答

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);
}
}
我只是從服務器獲取數據,強制函數等待下載,然后設置列和行數據
添加回答
舉報