PrimeNg - 使用嵌套組件的數據表選擇值

我有一個p-dataTable嵌套p-dropdown組件。在選擇一行時，如何獲得行的選定值？在選擇回調中，我收到支持每個下拉列表的數組，而不是選擇本身。PrimeNg - 使用嵌套組件的數據表選擇值

<p-dataTable [value]="affiliates" sortField="name" dataKey="id" selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10"> 
    <p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>  
    <p-column field="package" header="Packages"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [options]="affiliate.packages" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column field="country" header="Countries"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [options]="affiliate.countries" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column field="device" header="Devices"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [options]="affiliate.devices" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column header="Actions"> 

    </p-column> 
</p-dataTable>

來源

2017-07-15 Steve

可以使用在回調事件的event.data屬性來訪問行數據。

<p-dataTable [value]="affiliates" sortField="name" dataKey="id" selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10"> 
    <p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>  
    <p-column field="package" header="Packages"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [(ngModel)]="name.selectedPackage" [options]="affiliate.packages" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column field="country" header="Countries"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [(ngModel)]="country.selectedCountry" 
      [options]="affiliate.countries" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column field="device" header="Devices"> 
     <ng-template let-affiliate="rowData" pTemplate type="body"> 
      <p-dropdown [(ngModel)]="device.selectedDevice" 
      [options]="affiliate.devices" dataKey="label"></p-dropdown> 
     </ng-template> 
    </p-column> 
    <p-column header="Actions"> 

    </p-column> 
</p-dataTable>

回撥事件將如下

onRowSelect(event){ 
    this.selectedData=event.data 
}

LIVE DEMO

來源

2017-07-15 23:43:25 Aravind

PrimeNg - 使用嵌套組件的數據表選擇值

回答

相關問題