Question

这是我的项目：

我从下拉菜单中选择一个选项。我单击“刷新网格”按钮，它刷新了网格。因此第二列将使用从第一列中选择的数字值进行更新。
（有一个小问题：当网格刷新时，它将dropDown菜单恢复为默认值。我会选择仅刷新第二列来解决此问题）
无论如何，我想要的是：
第二列无需使用按钮即可自动刷新。
第一列具有自定义单元格渲染器组件的事实使我很难找到解决方案。
由于刷新网格的方法只能写在网格组件中。原因如下：

这是：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。
即：我可以启动一种方法来从自定义单元格渲染器刷新网格吗？
感谢您的时间！

Answer 1

我发现了一种愚蠢的解决方法，可以在我们等待可靠的答案时使用。
只需在grid-definition中添加它即可：
（cellMouseOut）=“ RefreshRisqueBrutColumn（）”

Answer 2

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

这是不正确的。单元格编辑器的<div ><ul id="content"></ul></div> <template id="item"> <li>${name}, ${num}, ${population}</li> </template>方法的params是agInit，并包含ICellEditorParams类型的api属性。因此，您基本上可以在Cell Editor中拥有一个可以调用GridApi的函数。我不知道这是否可以解决您的问题，但想指出该错误的陈述。 ag-grid中的大多数回调参数都包含这些属性，而不仅仅是params.api.refreshCells()。

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

2 个答案: