Angular - Ag-grid cellRendering 仅在一个列标题上 [英] Angular - Ag-grid cellRendering only on one column header

问题描述

现在我设法为所有列渲染到列标题(参见屏幕截图).但我的目标是将单元渲染器仅应用于 1 个特定列.我正在使用 Angular 5 和 ag-grid/ag-grid-angular 17.0.0

Right now i managed to render to columnheader for all columns (See Screenshot). But my goal is to apply the cell renderer only for 1 SPECIFIC column. I am using Angular 5 and ag-grid/ag-grid-angular 17.0.0

我的父组件看起来像(为了简单起见，我删掉了不相关的东西):

My parent component looks like (For the sake of simplicity i cut the irrelevant thing out):

export class ClanModalComponent implements OnChanges {

  @Input() clanInfo: ClansByClantagType;

  rowData: ClanMembersType[];
  columnDefs;
  frameworkComponents;

  constructor(private router: Router) {
    this.columnDefs = [
      {headerName: 'Tag', field: 'tag', width: 120 },
      {headerName: 'Name', field: 'name', width: 170 },
      {headerName: 'Role', field: 'role', width: 120},
      {headerName: 'Level', field: 'expLevel', width: 80},
      {headerName: 'Home', field: 'trophies', width: 120},
      {headerName: 'Trophies Night', field: 'versusTrophies', width: 120}
    ];
    this.frameworkComponents = { agColumnHeader: TrophiesHomeCellRendererComponent };

  ngOnChanges(): void {
    if (this.clanInfo) {
      this.rowData = this.clanInfo.memberList;
    }
  }
  }

我的 cellRenderer 组件如下所示:

And my cellRenderer component looks like this:

@Component({
  selector: 'app-trophy-home',
  template: `<img [src]="trophyHomeImg" width="25px" height="auto">`
})
export class TrophiesHomeCellRendererComponent implements  AgRendererComponent {

  public trophyHomeImg = 'expected/image/path';

  agInit() {}

  refresh(){
    return false;
  }
}

推荐答案

我认为您需要使用 ColumnDef 条目的 headerComponentFramework 属性，而不是 frameworkComponents 属性.例如:

I think you need to use the headerComponentFramework property of the ColumnDef entry, instead of the frameworkComponents property. For example:

...
{
  headerName: 'Trophies Night',
  field: 'versusTrophies',
  width: 120,
  headerComponentFramework: TrophiesHomeCellRendererComponent
}
...

您的TrophiesHomeCellRendererComponent 类需要实现IHeaderAngularComp 接口，而不是AgRendererComponent 接口.

Your TrophiesHomeCellRendererComponent class needs to implement the IHeaderAngularComp interface, instead of the AgRendererComponent interface.

查看此链接了解更多信息:ag-网格组件

See this link for more information: ag-Grid Components

这篇关于Angular - Ag-grid cellRendering 仅在一个列标题上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！