如何在任何事件上重新初始化 ag-grid？

Question

我通过单击要将 enableRtl 属性设置为 true 的按钮创建了一个 ag-grid 组件。

简而言之，我添加了一个组件 -

<ag-grid-angular #agGrid [floatingFilter]="true" 
      [enableRtl]="isArabic" (gridReady)="onGridReady($event)" 
      [(enableRtl)]="enableRtl" 
      [rowSelection]="rowSelection"
      [defaultColDef]="columnConfig" [rowData]="data" 
      [columnDefs]="columns"                   
      [gridOptions]="gridOptions"
></ag-grid-angular>

现在我想根据点击事件更改enableRtl。

这里，enableRtl 是组件的 public 变量。

但是，它没有反映 RTL。

我在 Stackblitz 添加了场景 -

https://stackblitz.com/edit/angular-ag-grid-col-span-and-col-group-tsso85

Answer 1

需要重新加载 gridOptions，atm ag-grid 不提供动态重新加载密钥设置的可能性，更多详细信息 here

Answer 2

有一种方法可以实现。

在 ag-grid-angular 元素级别为 ngIf 设置一个标志，并在您的事件处理程序中有条件地切换它。

<ag-grid-angular *ngIf="showGrid"
     class="ag-theme-material"
     [rowData]="rowData"
     [columnDefs]="columnDefs | async"
     [gridOptions]="gridOptions"
     [enableRtl]="lang"
>
</ag-grid-angular>

这样，网格将使用更新后的标志重新初始化。

Keep in mind that there is a performance cost involved here as the grid is being reinitialised. It's upto you if you think the impact is negligible, this is the solution for you.

查看更新后的 Stackblitz：ag-grid : RTL <-> LTR

如何在任何事件上重新初始化 ag-grid？

How to reinitialize ag-grid on any event?

ag-grid

angular