时间戳

首页 > 解决方案 > 如何在任何事件上重新初始化 ag-grid？

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

问题描述

我通过单击要将 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 是组件的公共变量。

但是，它并没有反映 RTL。

我在 Stackblitz 添加了场景 -

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

标签： angularag-grid

解决方案

有一种方法可以实现这一目标。

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

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

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

请记住，在重新初始化网格时，此处涉及性能成本。如果您认为影响可以忽略不计，这取决于您，这就是您的解决方案。

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

推荐阅读