Question

我正在使用延迟加载的PrimeNG Datatable（https://www.primefaces.org/primeng/#/datatable）。一切都很好但我需要在每一行中添加一个按钮（可以选择删除，编辑每条记录）。

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

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

{% extends 'template/app.html' %} << this file is located in the static folder

{% block 'content' %}
  content goes here
{% endblock %}

但是它不会评估代码并显示纯HTML private addActionsToRow(rows) { let rowsWithAction = []; for(let row of rows) { row['actions'] = '<div>Anything</div>' rowsWithAction.push(row); } return rowsWithAction; }。

它有办法吗？

Answer 1

可以使用模板完成，Datatable doc（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不允许向行添加组件

2 个答案: