要通过标记/HTML自定义列,你可以使用ag-Grid提供的自定义单元格组件。以下是一个示例解决方法:
首先,创建一个自定义单元格组件,例如HtmlCellComponent:
import { Component } from '@angular/core';
@Component({
  selector: 'app-html-cell',
  template: `
    
  `,
})
export class HtmlCellComponent {
  params: any;
}
然后,在你的组件中使用自定义单元格组件。在该组件的模板中,使用cellRendererFramework属性来指定自定义单元格组件,并通过cellRendererParams属性将数据传递给组件:
 
import { Component } from '@angular/core';
import { HtmlCellComponent } from './html-cell.component';
@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
})
export class GridComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'HTML Column', field: 'htmlColumn', cellRendererFramework: HtmlCellComponent, cellRendererParams: { value: 'Custom HTML' } },
    // other columns
  ];
  rowData = [
    { name: 'John Doe' },
    { name: 'Jane Smith' },
    // other rows
  ];
}
在上面的示例中,我们在columnDefs中定义了一个名为htmlColumn的列,并使用cellRendererFramework属性指定了自定义单元格组件HtmlCellComponent。我们还通过cellRendererParams属性将Custom HTML传递给自定义单元格组件。
这样,当表格渲染时,htmlColumn列中的单元格将使用自定义单元格组件来显示自定义的HTML内容。在HtmlCellComponent中,我们使用[innerHTML]绑定将params.value渲染为HTML。
希望这个示例能够帮助到你!