PrimeNG Datatable 不允许向行添加组件答案

【问题标题】：PrimeNG Datatable does not allow add components to the rowsPrimeNG Datatable 不允许向行添加组件
【发布时间】：2017-07-07 05:27:43
【问题描述】：

我正在使用带有延迟加载的 PrimeNG 数据表 (https://www.primefaces.org/primeng/#/datatable)。一切都很好，但我需要在每一行添加一个按钮（带有删除、编辑每条记录的选项）。

我试图以某种方式在视图的每一行中添加列，但无法弄清楚。

然后我尝试在数据表使用的控制器数组中添加 HTML：

private addActionsToRow(rows) {

    let rowsWithAction = [];
    for(let row of rows) {
        row['actions'] = '<div>Anything</div>'
        rowsWithAction.push(row);
    }

    return rowsWithAction;

}

但它不评估代码并显示纯 HTML <div>Anything</div>。

有办法吗？

【问题讨论】：

标签： angular datatable primeng primeng-datatable

【解决方案1】：

可以使用模板来完成，Datatable 文档中有一个部分 (https://www.primefaces.org/primeng/#/datatable)。我只需要将<ng-template> 更改为<template>。

【讨论】：

【解决方案2】：

这是我为每一行添加一个删除按钮的操作-

 <p-column [style]="{'width':'38px'}">        
      <ng-template let-h="rowData" pTemplate="body">
           <button class="ui-button-danger" type="button"  pButton (click)="deleteVendorRecord(h)" icon="fa-remove"></button>
      </ng-template>
 </p-column>

然后在ts文件中创建了一个函数deleteVendorRecord，接受一行

deleteVendorRecord(row):void{         
     this.vendorRecords.splice(this.vendorRecords.indexOf(row),1);            
}

【讨论】：