angular - Primeng 如何扩展行的 rowIndex？

Question

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single">
...</p-dataTable>

存在一些这样的

<ng-template let-col let-period="rowData" let-ri="rowIndex"   pTemplate="body">...</ng-template>

对于数据表

Answer 1

在您用于扩展行的 ng-template 中使用以下代码

<ng-template let-i="rowIndex">

   <button (click)="expand(i)"> expand </button>
</ng-template>

在展开时点击的按钮使用下面的代码获取行索引

expand(i){
    //... your logic to expand the row...
    this.expandedRowIndex = i;
}

 <p-dataTable [value]="services" [paginator]="true" expandableRows="true" rowExpandMode="single" (onRowExpand)="onRowExpand($event)">

更新 1:当您单击要展开的整行时。您可以使用 onRowExpand <p-datatable> 的属性(property)实现这一目标。

onRowExpand(cc){
    console.log(cc)
    //logs the entire object which is clicked     
  }

该方法在行展开时触发

LIVE DEMO