ag-grid Angular显示不同的列数据

时间:2018-12-13 08:54:19

标签: angular gridview datagrid ag-grid ag-grid-angular

我一直在努力使用 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循环中生成列,但是我无法设法将数据放入其中。我唯一能做的就是为所有三列打印相同的数据。我要附上一张我所管理和需要的照片。也许有人有一个例子或想法,而不是我应该做什么?enter image description here

对于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
 }]
}
]

0 个答案:

没有答案