可编辑数据表中的 PrimeNg 下拉菜单不包含所选值答案

【问题标题】：PrimeNg dropdown in editable datatable not holding the selected value可编辑数据表中的 PrimeNg 下拉菜单不包含所选值
【发布时间】：2017-11-16 22:54:30
【问题描述】：

下面是数据表中列的代码

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

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

每当我编辑网格时，下拉菜单都会显示“请选择”而不是显示选定的组织名称。当我打印“csp.organization.organizationId”时，它给出了选定的组织 ID，但 [(ngModel)] 似乎没有设置选定的值。

我哪里错了？

【问题讨论】：

标签： angular primeng-datatable primeng-dropdowns

【解决方案1】：

有同样的问题，我发现，在我的例子中，当下拉菜单仍然为空时，应用程序试图搜索 ngModel 中设置的值。

解决方案是添加一个 *ngIf 以确保列表不为空，在您的情况下，它会像这样：

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

希望这会有所帮助:)

【讨论】：

非常感谢。您的解决方案有效。我更改了 if 条件以检查长度 > 1。现在的问题是，如果我在数据表中有不止一行，则将为所有其他行设置最后一行中下拉列表的选定值。

【解决方案2】：

我已通过调用下拉菜单的方法 (onfocus) 并执行 dropdown.updateSelectedOption(val); 来解决此问题。在方法中。

 &lt;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" &gt;&lt;/p-dropdown&gt;

ts 代码：

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

【讨论】：