无法动态地将数据添加到 ag-grid

Question

我正在尝试填充 ag-grid 的行 dynamically.The 仅当我发送文件进行验证并且存在一些错误时，才必须显示网格。下面是我的代码：

columnDefs = [
    {headerName: 'S.No.', field : 'SNo'},
    {headerName: 'Error Description', field: 'Error_Description'},
    {headerName: 'Suggestion', field: 'Suggestion'}
  ];

rowData = [
    // {SNo :1, Error_Description:"Error 1", Suggestion: 'Suggestion 1'},
    // {SNo :2, Error_Description:"Error 2", Suggestion: 'Suggestion 2'},
    // {SNo :3, Error_Description:"Error 3", Suggestion: 'Suggestion 3'},
    // {SNo :4, Error_Description:"Error 4", Suggestion: 'Suggestion 4'}
  ];

index.html

<ag-grid-angular [hidden]="isValid" class="ag-theme-balham" style="width: fit-content" [rowData]="rowData" [columnDefs]="columnDefs">
        <!-- Show table -->
      </ag-grid-angular>

网格行的动态填充

for(var i=0;i<this.errorMsgs.length;i++){
        let errorObj={};
        errorObj["SNo"]=i+1;
        errorObj["Error_Description"]=this.errorMsgs[i];
        errorObj["Suggestion"]="Put Some Suggestion"
        this.rowData.push(errorObj);
      }

当我使用硬编码值（注释值）时，我得到了预期的输出。但是，当我尝试动态填充网格时，不会显示数据。数据被推入 rowData 但由于某种原因，它没有显示在 table 中。我究竟做错了什么？如果这是一个愚蠢的问题，请提前致谢并道歉，因为这是我第一次使用 ag-grid

Answer 1

这可能是 Angular 的变更检测给您带来麻烦。当你 push 到一个数组时，数组的内容会改变，但 Angular 可能不会选择它，因为它通常取决于对 reference 的更改而不是值.

替换：

this.rowData.push(errorObj);

和

this.rowData = [...this.rowData, errorObj];

这将 "add" 新的 errorObj 到 rowData 通过本质上创建一个新数组并重新分配新数组的 reference至 rowData。它依赖于 spread syntax. I also recommend reading more about Angular Change Detection.

Answer 2

使用 gridApi 的 setRowData() 向网格添加值。最好在 onGridReady 方法中使用它。

无法动态地将数据添加到 ag-grid

unable to add data to ag-grid dynamically

typescript

angular

ag-grid-angular