PrimeNg - Valeurs de sélection de table de données avec des composants imbriqués

Question

J'ai un p-dataTable avec des composants imbriqués p-dropdown. Lors de la sélection d'une ligne, comment puis-je obtenir les valeurs sélectionnées de la ligne? Dans le rappel de sélection, je reçois le tableau sauvegardant chaque liste déroulante, et non la sélection elle-même.

<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

Vous pouvez accéder aux données de ligne en utilisant la propriété event.data en cas de rappel.

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

Rappel événement sera comme

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

LIVE DEMO