Question

尝试让绑定在单元格模板中工作。

理想情况是这样的：

this.columnDefs = [
        { headerName: "ID", field: "ID", hide: true },
        { headerName: "Name", field: "NAME", width: 400, template: '<a [href]="productUrl">{{data.NAME}}</a>',

更新

在文档中注意到了这一点：/

Angular 2的ag-Grid内不支持角度编译。

可能的解决方案1 

作为一种解决方法我正在添加一个预先构造的html列：

this.Products.forEach((p:any) => p['url'] = '<a href="http://blah/'+ p.ID +'">' + p.NAME + '</a>')

但是这会呈现为转义的html。如果我需要使用模板，我相信我会回到原点

解决方法2

（cellClicked）=＆＃34; cellClicked（$事件）＆＃34;

cellClicked($event){
    var p = $event.node.data; // product object
    window.location.href = this.productUrl + p.ID;
}
...
{ headerName: "Name", field: "NAME", width: 400, cellClass: 'btn btn-link' },

这可能适用于链接列，但无法添加任何动态HTML是一种非首发..

Answer 1

我没有测试它的性能，但可以在这种情况下使用cellRenderer。（性能是一个问题，因为每个单元格都会触发此功能）

{ headerName: "Name", field: "NAME", width: 400, cellRenderer: function(pars){
      return pars.node.data.linkHtml;
} }

pars.node.data 是该行背后的基础对象。 linkHtml像这样附加到对象（这个逻辑也可以在渲染器中完成）：

this.Products.forEach(
    (p:any) => p['url'] = '<a href="'+ this.productUrl + p.ID +'">' + p.NAME + '</a>'

一旦进行了更多测试，我将报告性能影响

ag-grid angular 2动态单元格HTML

1 个答案: