PrimeNg - ネストされたコンポーネントを使用したデータテーブルの選択値

Question

p-dropdownコンポーネントを入れたp-dataTableがあります。行の選択時に、行の選択された値を取得するにはどうすればよいですか？選択コールバックでは、配列自体が選択肢ではなく、各ドロップダウンを受け取ります。

<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 
} 

LIVE DEMO

のようになります。