angular - PrimeNG Datatable 不允许向行添加组件

Question

我正在使用带有延迟加载的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>。

它有办法吗？

Answer 1

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

Answer 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);            
}