ag grid cellrenderer:向单元格添加html标记,但不在模板中,而是作为函数的返回值

我最近发现AG电网和AM试图把它整合到我现有的角项目。目前,我正试图弄清楚自定义单元格呈现器是如何工作的最后,我想根据单元格的值在一些单元格中放入(有些)复杂的html语句。但目前我只想用<b><b>标记包装内容(简单字符串)。

基本上,我做了所有必要的事情,即:

• 创建了basic-render.component.ts,
• 将所需的行添加到app-module.ts
• 并将所有相关的ag网格内容添加到正在使用/显示ag网格的组件中。

这一切工作良好,也细胞渲染器是应用到细胞! 但问题是,<b>标记不是解释为HTML,而是作为字符串显示的!

我的basic-cellender.component.ts如下所示:

import { Component} from '@angular/core';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
    selector: 'basic-cell',
    template: `{{valueBasic()}}`
})
export class BasicRenderer implements AgRendererComponent {
    private params:any;

    agInit(params:any):void {
        this.params = params;
    }

    refresh(params: any): boolean {
        this.params = params;

        return true;
    }

    private valueBasic():string {
        return "<b>" + this.params.value + "</b>";
    }
}

我的app.component.ts中有这个

  columnDefs = [ 
    {headerName: 'Make', field: 'make', cellRenderer: 'BasicRenderer'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
  ];

如我所说,表显示正确,但第一列如下:'<b>value1</b>'、'<b>value2</b>'等等。。。

但有趣的是,当像这样将标记放入模板时,它可以工作:

template: `<b>{{valueBasic()}}</b>`

但这并不是真正的解决方案,因为最终,当一切正常工作时,我希望包含更复杂的HTML语句,这些语句需要像我在这里试图实现的那样由函数返回。