PrimeNG Datatable不允許向行添加組件

Question

我正在使用PrimeNG Datatable（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);    
}