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

可以用模板来完成，数据表文档中有一个部分（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);            
}

PrimeNG Datatable 不允许向行添加组件

PrimeNG Datatable does not allow add components to the rows

angular

datatable

primeng

primeng-datatable