ngx-datatable为每行添加按钮

Question

我正忙于学习如何在离子应用程序中使用ngx数据表(使用angular)，我需要能够向每一行添加一个编辑和删除按钮。

我见过人们使用模板，但我不确定它是如何工作的，我进行API调用并像往常一样使用

<ngx-datatable class="material"
[rows]="rowdata"
[columns]="columndata">
</ngx-datatable>

但是现在我需要一个额外的列，其中包含一个编辑和删除按钮，该按钮从每一行获取ID并将其传递给.ts文件中的编辑和删除函数。

如何做到这一点？

谢谢R

Answer 1

您需要使用适当的Id作为目标值来定义新的列名Actions。并且还需要在ngx-datatable中声明每一列

HTML代码

    <ngx-datatable class="material"
      [rows]="rowdata"
      [columns]="columndata">


 <ngx-datatable-column name="Actions" prop="name">
   <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
                                    let-row="row">
                                    <button type="button" class="btn btn-outline-success"
                                        (click)='edit(value)'>Success {{rowIndex}}</button>
                                    <button type="button" class="btn btn-outline-danger"
                                        (click)='delete(value)'>Danger</button>


              </ng-template>
          </ngx-datatable-column>
  <ngx-datatable-column name="Name" prop='name' >
           </ngx-datatable-column>  // need to define each column with empty body

</ngx-datatable>

TS代码

columns = [ ... { name: 'Actions', prop: 'Id' } //new column to existing column array  ***define prop to Id 
  ];


  edit(value) {
    console.log(value);
  }


  delete(value) {
    console.log(value);
  }