现在我设法为所有列渲染到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;
}
}
答案 0 :(得分:1)
我认为您需要使用headerComponentFramework
条目的ColumnDef
属性,而不是frameworkComponents
属性。例如:
...
{
headerName: 'Trophies Night',
field: 'versusTrophies',
width: 120,
headerComponentFramework: TrophiesHomeCellRendererComponent
}
...
您的TrophiesHomeCellRendererComponent
类需要实现IHeaderAngularComp接口,而不是AgRendererComponent
接口。
有关详细信息,请参阅此链接:ag-Grid Components