Question

我想在添加了colDef的列上使用自定义单元格渲染器， rowGroup = true。自定义单元格渲染器未显示单元格渲染器框架的html模板中的内容。

当我使用agGroupCellRenderer时，它工作正常，但是当我使用自定义渲染器时，它不显示内容。

Answer 1

您可以编写一个单元格渲染组件

This is the ts file

export class AgExpandCellRenderComponent implements OnInit, ICellRendererAngularComp {
  params;
  isExpand: boolean = false;

  constructor() { }
  refresh(params: any): boolean {
    this.isExpand = params.node.expanded;
    return true;
  }
  agInit(params: ICellRendererParams): void {
    this.params = params;
  }
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void {
  }

  ngOnInit(): void {
  }

  toggleExapnd() {
    this.params.node.setExpanded(!this.isExpand);
    this.isExpand = !this.isExpand;
  }

}

这是模板

<div>
  <div>
    <span class="ag-group-expanded" *ngIf="isExpand" (click)="toggleExapnd()" ref="eExpanded"><span
        class="ag-icon ag-icon-expanded" unselectable="on"></span></span>
    <span class="ag-group-contracted" *ngIf="!isExpand" (click)="toggleExapnd()" ref="eContracted"><span
        class="ag-icon ag-icon-contracted" unselectable="on"></span></span>
  </div>
  <div>
    {{You customized content here}}
  </div>
</div>

然后像这样将此组件添加到 gridOptions.frameworkComponents

frameworkComponents: {
  'ExpandCellRender': AgExpandCellRenderComponent
},

最后是 colDef

{
  field: 'field',
  cellRendererSelector: (params) => {
    return {
        component: 'ExpandCellRender'
    };
},

在angular 9中将agGroupCellRenderer与自定义单元格渲染器一起使用

1 个答案: