[英]Angular - Ag-grid cellRendering only on one column header
现在,我设法将所有列渲染为columnheader(请参见屏幕截图)。 但是我的目标是仅将单元格渲染器应用于1 SPECIFIC列 。 我正在使用Angular 5和ag-grid / ag-grid-angular 17.0.0
我的父组件看起来像(为简单起见,我删除了不相关的内容):
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组件如下所示:
@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
属性。 例如:
...
{
headerName: 'Trophies Night',
field: 'versusTrophies',
width: 120,
headerComponentFramework: TrophiesHomeCellRendererComponent
}
...
您的TrophiesHomeCellRendererComponent
类需要实现IHeaderAngularComp接口,而不是AgRendererComponent
接口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.