Angular2 + PrimeNG - 如果设置了可编辑，则下拉选定值无法正常工作

Question

我安装了PrimeNG套件的Angular2应用程序。

我正在尝试使用primeNG下拉组件实现一个表单。

当我运行应用程序并从列表框中选择一个元素时，会出现问题。

而不是显示值，它显示 [object Object]

问题

html组件

 <p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" formControlName="Customer_itm" [(ngModel)]="Customer_itm" filter="filter" editable="editable"> </p-dropdown>

声明

 /*primeng listBox */
  Customer_itm: SelectItem;
  listCustomers_itm: SelectItem[];

ts代码填写选项：

this.mdService.Get_Customer(false).subscribe(
      data => {
        this.listCustomers = data;

        this.listCustomers_itm = [];
        for (let c of this.listCustomers) {
          this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: { id: c.idCustomer, name: c.businessName, code: c.code } });
        }

      }
    );

如果使用自定义标签和值的instad，则使用平面值如：

this.listCustomers_itm.push({ label: c.code, value:c.businessName });

一切正常......

我还试图实现onChange函数：

  onCustomerSelect(e)
  {   
    console.log(e);        
  }

我选择项目时控制台中的输出是：

Object { id: 5, name: "Luigino Gatto", code: "5" }

如果删除editable="editable"属性，我终于发现代码正常工作，但我需要将其设置为可编辑...

感谢支持

Answer 1

您可以将整个对象放入其中，而不是在value中推送单个值。

this.mdService.Get_Customer(false).subscribe(
  data => {
    this.listCustomers = data;

    this.listCustomers_itm = [];
    for (let c of this.listCustomers) {
      this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: c });
    }

  }
);

Answer 2

从您的模板看起来像尝试使用模型驱动（formcontrolName） 和模板驱动（ngModel）方法。

这没有意义。

<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" **formControlName**="Customer_itm" **[(ngModel)]**="Customer_itm" filter="filter" editable="editable"> </p-dropdown>

请选择合适的原因并正确使用。

Answer 3

我遇到了同样的问题。据我所知，当一个对象作为值提供时，p-dropdown组件将调用value.toString（）。

为了解决这个问题，我在价值字段中向我想要的对象添加了以下方法。

toString() : string{
  return this.name.toString();
}

只是为了澄清为什么我使用name.toString（） - Prime喜欢使用Typescripts原始字符串而不是包装器对象String。