primeng - PrimeNg - 具有嵌套组件的数据表选择值

Question

我有一个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>

Answer 1

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
}

现场演示