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

时间:2019-05-06 11:27:28

标签: angular ag-grid ag-grid-ng2

这是我的项目:
enter image description here

我从下拉菜单中选择一个选项。我单击“刷新网格”按钮,它刷新了网格。因此第二列将使用从第一列中选​​择的数字值进行更新。
(有一个小问题:当网格刷新时,它将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。
即:我可以启动一种方法来从自定义单元格渲染器刷新网格吗?
感谢您的时间!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

  

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

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