可编辑数据表中的PrimeNg下拉列表不保存所选值

Question

Below is the code for the column in the datatable

 <p-column field="organization.description" header="Partner" [editable]="dtCostShare" [style]="{'width':'30%'}"> <ng-template let-col let-csp="rowData" pTemplate="editor"> <span class="required-lbl">* <p-dropdown name="organization" [(ngModel)]="csp.organization.organizationId" (onChange)="addPartnerDescription(csp.index)" [options]="partners" [style]="{'width':'10px'}" appendTo="body" [ngClass]="{'errorCol':csp.organization.organizationId === ''}"> </p-dropdown> </span> <span *ngIf="(csp.organization.organizationId === '' )" class="text-danger">Partner is required</span> </ng-template> </p-column> 

ts code to populate the droupdown

  getPartners() { this.partners.push({ label: 'Please Select', value: '' }); this.parameterService.getPartners().subscribe((data) => { for (let record of data) { this.partners.push({ label: record.description, value: record.organizationId }); } }); } 

Whenever i edit the grid the dropdown shows the "Please select" instead of showing the selected Organization name. When i print the "csp.organization.organizationId" it is giving the selected organizationId but [(ngModel)] doesn't seem to set the selected value.

where am i going wrong?

Answer 1

Had the same issue, I found that, in my case, the app was trying to search the value set in ngModel when the dropdown was still empty.

The solution was to add a *ngIf to be sure that the list wasn't null, in your case it'll be smthng like this :

<p-dropdown *ngIf="partners != null && partners.lenght > 0"
name="organization" [(ngModel)]="csp.organization.organizationId"...

Hope this will help :)

Answer 2

I have fixed this by calling a method (onfocus) of the dropdown and doing dropdown.updateSelectedOption(val); in the method.

  <p-dropdown #dd1 name="organization" [(ngModel)]="csp.organization.organizationId" placeholder="Please Select" (onFocus)="setSelectedPartner(dd1,label of the selectItem,value of the selectItem)" [options]="SelectItemList" ></p-dropdown> 

ts code :

 setSelectedPartner(dropdown: Dropdown,label:any ,val:any){ if(val!='') dropdown.updateSelectedOption(val); }