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

Posted 2023-03-28

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

【英文标题】：setColumnDefs and setRowData not working while loading dynamic column and rows in ag-grid

【发布时间】：2020-08-10 03:54:03

【问题描述】：

以下是 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"]
      ]

使用上述数据，我有一个下拉列表，其中包含所有 StudentName 列表，如您在 JSON 中看到的 Rockey、Jony，并通过使用考试数组，我想在 ag 网格中创建动态标题及其动态数据。 假设用户从下拉列表中选择了 Rockey，那么标题应该是“状态”、“时间戳”和“用户 ID”，当用户从下拉列表中选择 Jony 时，ag 网格会更改标题以及类似的数据 “报告”、“通过”、“报告 ID”。

<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);
      
    

 

动态标头及其关联数据的收集方法

 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);
  

我附上了我的标题输出截图。它出现在一个地方，带有“，”以及显示“没有要显示的行”的行。

【参考方案1】：

您的标题是一个数组。您将整个数组分配给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 );
);

【讨论】：

感谢@Pratik Bhat 的指导！但是现在仍然面临一个问题..当我从下拉列表中选择 Jony 时，前一列的 rocky 不会被删除，它会被 Jony 添加，所以现在我的网格标题就像 Status、TimeStamp、UserId、Report、TimeofReport、ReportId 和上一列显示空白....所以我使用了 this.gridOptions.api.refreshHeader(); this.gridOptions.api.refreshView();但仍然没有运气

您是否在每次选择后遍历对象并设置标题名称？那 + refreshHeader 应该可以解决它