在AgGrid中观察到:CellRenderer

Question

我试图从后端向AGGrid单元呈现器组件添加一些数据，但它没有读取可观察到的数据

以下是我迄今所尝试的

cellRendererParams

• 直接从cellRenderer组件中调用服务

• 调用数据网格中的服务并将值传递为cellRenderer

// 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();
}

可观察到的组件没有什么问题，因为我能够在所有其他组件(甚至在数据网格组件中)中访问它。

有什么想法吗？

Answer 1

当您想要在单元格呈现器内部使用角时，您应该设置cellRendererFramework属性，而不是cellRenderer属性。例如：

customColumn: {
  cellRendererFramework: MyCellComponent
}

然后，您将能够在单元组件中使用您的服务，并且可观察到的服务也会工作。请参阅使用可观察到的：https://stackblitz.com/edit/angular-ag-grid-cell-renderer的角单元渲染器组件的简单示例。

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

Answer 2

将参数作为如下函数传递：

canEdit$: () => this.userInfo.getUserRole()

然后在CellRenderer内部：

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

模板：

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