在 ag-grid 中加载动态列和行时，setColumnDefs 和 setRowData 不起作用

Question

下面是JSON数据

var dataset =

[{
        "studentname": "Rockey",
        "age": 13,
        "average": 8.2,
        "exam": [{"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserId": "123"},
         {"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserId": "456"},
         {"Status": "Fail", "TimeStamp": "2019-03-12 08:19:50", "UserId": "789"}]
      },
      {
        "studentname": "Jony",
        "age": 13,
        "average": 8.2,
        "exam": [{"Report": "Pass", "TimeofReport": "2019-03-12 08:19:50", "ReportId": "333"},
        {"Report": "Pass", "TimeofReport": "2019-03-12 08:19:50", "ReportId": "444"},
         {"Report": "Fail", "TimeofReport": "2019-03-12 08:19:50", "ReportId": "555"}]
      }]

使用上面的数据，我有一个 drop-down，其中我有所有 StudentName 列表，如 Rockey 和 Jony，正如您在 JSON 中看到的，并且通过使用考试数组，我想创建动态 header 及其在 ag 网格中的动态数据。假设用户从 drop-down 编辑了 Rockey，那么 header 应该是 "status"、"TimeStamp" 和 "Userid"，当用户 select Jony从 drop-down 然后 ag 网格更改 header 以及类似的数据 "Report","Pass","ReportId".

<ag-grid-angular " 
class="ag-theme-balham"
#agGrid
[columnDefs]="columnDefs"
id="newGrid"
[enableSorting]="true"
[enableFilter]="true"
[modules]="modules"
[paginationAutoPageSize]="true"
[rowData]="rowData"
[rowSelection]="rowSelection"
(gridReady)="onGridReady($event)"
[pagination]="true">>
</ag-grid-angular>

变量声明部分

  tableData: string[] = [];
  tableList: string[] = [];
  tableName: string;
  pushHeader:any=[{}];
  exam: any;
  tableColumns: [{headerName: string, field: string}] = this.pushHeader;
  tableRecord: {};

构造函数逻辑：

constructor() {
    this.GetGridData();
    this.gridOptions = <GridOptions>{
      rowData: this.tableData,
      columnDefs: this.tableColumns,  //Collecting headers and pushing to grid
      onGridReady:(event: any) => {
        this.gridOptions.api = event.api;
        this.gridOptions.api.setColumnDefs(this.tableColumns);
        this.gridOptions.api.setRowData(this.rowData);
        console.log("Headers",this.tableColumns);
      }
    }

 }

收集动态header及其相关数据的方法




 public GetGridData() {
          //This is commented code I was trying with gridApi method but no output generated so ignore below commented code
         //var params = { force: true };
         // this.gridApi = params["api"];
         // this.gridcolumnApi = params["columnApi"];
         // params["api"] = this.exam;


         //I have applied logic to process on exam array if user select studentname like Rockey from drop 
 down then its corresponding data should display in grid

         this.exam=[{"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserId": "123"},
                   {"Status": "Pass", "TimeStamp": "2019-03-12 08:19:50", "UserId": "456"},
                   {"Status": "Fail", "TimeStamp": "2019-03-12 08:19:50", "UserId": "789"}]

          let header: any = [];
               Object.keys(this.exam[0]).forEach(function (key) {
               header.push(key)
               });
         this.tableColumns.push({ "headerName": header, "field": header });
         this.gridOptions.api.setColumnDefs(this.tableColumns);
         this.gridOptions.rowData = this.exam;
         this.gridOptions.api.setRowData(this.rowData);
  }

我附上了 headers 的输出截图。它以“，”出现在一个地方，并且关于显示 "no rows to show".

的行

Answer 1

你的header是一个数组。您将整个数组分配给 tableColumns
相反，你应该做这样的事情 -

  let headers: any = [];
       Object.keys(this.exam[0]).forEach(function (key) {
       header.push(key)
       });


 //iterate through headers array, construct colDef and push to tableColumns
headers.forEach((header) => {
     this.tableColumns.push({ "headerName": header, "field": header });
});

在 ag-grid 中加载动态列和行时，setColumnDefs 和 setRowData 不起作用

setColumnDefs and setRowData not working while loading dynamic column and rows in ag-grid

ag-grid

angular7

ag-grid-angular