我有一个p-dataTable
嵌套p-dropdown
组件。在选择行时,如何获取行的选定值?在选择回调中,我收到支持每个下拉列表的数组,而不是选择本身。
<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>
答案 0 :(得分:0)
您可以使用回调事件中的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 强>