如何在 Angular 项目中自动刷新 ag-grid 中的单元格

Posted 2023-03-28

【中文标题】如何在 Angular 项目中自动刷新 ag-grid 中的单元格

【英文标题】：How to automatically refresh cells in ag-grid in an Angular project

【发布时间】：2019-09-24 00:51:52

【问题描述】：

这是我的项目：

我从下拉菜单中选择一个选项。我单击“刷新网格”按钮并刷新网格。因此，第二列将使用从第一列中选​​择的数值进行更新。

有一个小问题：当网格刷新时，它会将下拉菜单恢复为默认值。这可以通过仅刷新第二列来避免。

我想要的是：无需使用按钮即可自动刷新第二列。

第一列有一个自定义单元格渲染器组件这一事实让我很难找到解决方案。 由于刷新网格的方法只能写在网格组件中。原因如下：

grid.component.html

    <button (click)="RefreshRisqueBrutColumn()">Refresh grid</button>
    
    <ag-grid-angular
      style="width: 500px; height: 500px;"
      class="ag-theme-balham"
      [enableSorting]="true"
      [enableFilter]="true"
      [pagination]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
      [enableCellChangeFlash]="true"
    >
    </ag-grid-angular>

grid.component.ts 代码：

     /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */
       private gridApi;
       private gridColumnApi;
       onGridReady(params) 
         this.gridApi = params.api;
         this.gridColumnApi = params.columnApi;
         params.api.sizeColumnsToFit();
       
       public RefreshRisqueBrutColumn() 
         const params =  force: true ;
         this.gridApi.refreshCells(params);
       
       /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */

注意到 onGridReady 方法了吗？这是刷新过程的关键。如果在 grid.component.ts 中定义，它只能绑定到 gridReady。即：我无法从 customCellRenderer 组件启动刷新。

customCellRenderer.component.html：

    <select class="form-control"  (change)=" UpdateRisqueBrut($event.target);" >
        <br>
        <option id="1">1- Très improbable</option>
        <option id="2">2- Peu probable</option>
        <option id="3">3- Possible</option>
        <option id="4">4- Probable</option>
    </select>
    <br>

customCellRenderer.component.ts 中的相关代码：

    message:Number;
      constructor(private data: DataService)  
      ngOnInit() 
      
      params: any;
      agInit(params: any): void 
        this.params = params;
      
      proba=5;
      public UpdateRisqueBrut(t) 
        if (t.value === "1- Très improbable") 
        this.data.changeMessage(1)
          this.proba=1;
         else if (t.value === "2- Peu probable") 
        this.data.changeMessage(2)
          this.proba=2;
         else if (t.value === '3- Possible') 
        this.data.changeMessage(3)
         else if (t.value === '4- Probable') 
        this.data.changeMessage(4)
        
      

总结一下，当刷新代码（和方法）必须在 grid.component 中时，如何根据第一列中选​​择的值（因此来自自定义单元格渲染器组件）自动刷新第二列.ts.

例如：我可以启动一个从自定义单元格渲染器刷新网格的方法吗？ 感谢您的宝贵时间！

【问题讨论】：

我应该在customCellRenderer.component.ts中注入grid.component.ts吗？这样我就可以从 customCellRenderer.component.ts 启动刷新方法？

这显然会导致所谓的循环依赖并使应用程序崩溃，这是有道理的：在循环依赖中检测到警告：src\app\drop-down-cell-renderer\drop-down-cell-renderer.component .ts -> src\app\app.component.ts -> src\app\drop-down-cell-renderer\drop-down-cell-renderer.component.ts

【参考方案1】：

我无法从 customCellRenderer 组件启动刷新。

这是不正确的。 params 的 agInit 单元格编辑器方法是 ICellEditorParams 并包含 api 属性，其类型为 GridApi。所以你基本上可以在单元格编辑器中有一个可以调用params.api.refreshCells()的函数。我不知道这是否会解决您的问题，但想指出错误的说法。 ag-grid 中的大多数回调参数都包含这些属性，而不仅仅是GridReady。

【参考方案2】：

我找到了一种解决此问题的愚蠢方法，您可以在我们等待可靠答案时使用它。 只需在网格定义中添加： (cellMouseOut)="RefreshRisqueBrutColumn()"