Angular - AgRrid cellRendering только для одного заголовка столбца

Question

Прямо сейчас мне удалось отрендерить заголовок столбца для всех столбцов (см. Снимок экрана). Но моя цель - применить средство визуализации ячеек только для 1 КОНКРЕТНОГО столбца . Я использую 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;
  }
}

Answer 1

Я думаю, вам нужно использовать свойство headerComponentFramework записи ColumnDef вместо свойства frameworkComponents. Например:

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

Ваш класс TrophiesHomeCellRendererComponent должен реализовывать интерфейс IHeaderAngularComp вместо интерфейса AgRendererComponent.

См. Эту ссылку для получения дополнительной информации: Компоненты ag-Grid