我一直在努力使用 https://www.ag-grid.com/ 设置网格。
整个情况是这样的:
在我的父组件中,我通过this.Ids = ['8436368d', '2d60dd4b', 'eb732f6d8eea'];
数组中这些ids
的数量可以是3或5,具体取决于用户提供的ID数。
对于每个ids
元素,我都会获取另外的data[]
。所以模型看起来像这样:
model: Model[] = [];
class Data {
time: number;
value: number;
id: string;
}
class Model {
data: Data[] = [];
name: string;
id: string;
}
ngOnChanges() {
this.initializeColumnDefs();
for (let id of this.ids) {
this.loadData(id);
}
}
}
private loadData(id: string) {
this.model = [];
// ....
// Generate API requests
let observables = [];
observables.push(this.http.get(url, service.contentTypeJsonHeaders).map(r => r.json()));
Observable.forkJoin(...observables).subscribe((response: any[]) => {
// ......
this.model = [].concat(this.model).concat([temp]);
}
}
});
}
private initializeColumnDefs() {
this.columnDefs = [
{
headerName: 'Col1',
colId: 'time',
field: 'time',
];
for (let i = 0; i < this.ids.length; i++) {
this.columnDefs.push({
headerName: service.InfoArray.filter(a => a.id == this.ids[i]).map(s => s.name),
field: 'value',
colId: 'value',
editable: !this.readonly,
cellEditorParams: {
useFormatter: true
}
});
}
}
我正在for
循环中生成列,但是我无法设法将数据放入其中。我唯一能做的就是为所有三列打印相同的数据。我要附上一张我所管理和需要的照片。也许有人有一个例子或想法,而不是我应该做什么?
对于JSON数据,我尝试了各种组合,目前为:
model = [{
id: '123456789',
name: 'name',
data: [{
time: 10h,
value: 78,
id: '123456789
},
{
time: 11h,
value: 80,
id: '123456789
},
{
time: 12h,
value: 23,
id: '123456789
}]
},
{
id: '987654321',
name: 'name',
data: [{
time: 10h,
value: 9999,
id: '987654321
},
{
time: 11h,
value: 2222,
id: '987654321
},
{
time: 12h,
value: 1111,
id: '987654321
}]
}
]