Question

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

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中，但由于某种原因，该数据未显示在表中。我究竟做错了什么？在此先感谢并道歉，如果这是一个愚蠢的问题，因为这是我第一次与ag-grid合作

Answer 1

这可能是Angular的变更检测让您感到困惑。当您push到数组时，数组的内容会更改，但是Angular可能不会这么做，因为它通常取决于对 reference 而不是 value 。

替换：

this.rowData.push(errorObj);

使用

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

这实际上是通过创建新数组并将新数组的 reference 分配给errorObj来将新rowData添加到rowData。它依靠spread syntax。我还建议您阅读有关Angular Change Detection的更多信息。

Answer 2

使用gridApi的setRowData（）可以向网格添加值。最好在onGridReady方法中使用此方法。

无法动态将数据添加到农业网格

2 个答案: