在 Ag Grid 中可观察：单元格渲染器答案

【问题标题】：Observable In AgGrid:CellRenderer在 Ag Grid 中可观察：单元格渲染器
【发布时间】：2021-05-12 00:28:34
【问题描述】：

我正在尝试将一些数据从我的后端添加到 AGGrid 单元格渲染器组件，但它没有读取可观察数据

这是我目前尝试过的

直接从 cellRenderer 组件中调用服务
在数据网格中调用服务并将值作为 cellRendererParams 传递

// My Grid Options
gridOptions: {
  columnTypes: {
    "actionColumn": {
     cellRenderer: 'actionColumnRenderer',
     cellRendererParams: {
        canEdit$: this.userInfo.getUserRole() // Returns a Observable<boolean>
     }
  }
}

//Inside ActionColumnRenderer
  <div *ngIf="(canEdit$|async)></div>

// Calling in the service in the actionRenderer directly
agInit(params:any){
  this.params = params;
  this.canEdit$ = this.userInfo.getUserRole();
}

observable 没有任何问题，因为我可以在所有其他组件中访问它（甚至在数据网格组件中）

有什么想法吗？

【问题讨论】：

参见How to Ask，尤其是minimal reproducible example。这个想法是你描述你想做什么，展示你尝试了什么，并告诉我们你得到了什么结果。在 plunk 或 stackblitz 上重现您的问题，以便其他人可以轻松地帮助您。
我很想举个例子，但我不确定它会有多大帮助，因为它只是一些基本的 AGGrid cellRendering 组件。还是加了
不要将 observable 作为参数传递，而是在订阅后尝试传递它的值。在getUserRole的订阅部分初始化gridOptions
gridOptions 需要在组件创建后立即初始化。这是因为它由 ag-grid 使用，并且一旦初始化，我就无法动态更改 gridOptions 属性。
这是正确的，所以延迟初始化你的 ag-grid 直到你得到它。前任。 <ag-grid-angular *ngIf="gridOptions" gridOptions="gridOptions"....></ag-grid-angular>

标签： angular observable ag-grid ag-grid-angular

【解决方案1】：

当您想在单元格渲染器中使用 Angular 时，您应该设置 cellRendererFramework 属性，而不是 cellRenderer 属性。例如：

customColumn: {
  cellRendererFramework: MyCellComponent
}

然后你就可以在 cell 组件中使用你的服务了，observable 就可以工作了。请参阅这个使用 observable 的角度单元格渲染器组件的简单示例：https://stackblitz.com/edit/angular-ag-grid-cell-renderer

文档：https://www.ag-grid.com/documentation/angular/components/#registering-framework-components

【讨论】：

我尝试使用 cellRendererFramework 但仍然得到相同的结果。无法从 cellRenderer 中订阅任何可观察的数据