ag-grid angular 2 动态单元格 HTML答案

【问题标题】：ag-grid angular 2 dynamic cell HTMLag-grid angular 2 动态单元格 HTML
【发布时间】：2016-12-10 20:57:09
【问题描述】：

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

最好是这样的：

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 中不支持 Angular 编译。

可能的解决方案 1

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

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

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

解决方法 2

(cellClicked)="cellClicked($event)"

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 是一种非首发..

【问题讨论】：

标签： angular ag-grid

【解决方案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>'

一旦经过更多测试，我将报告性能影响

【讨论】：