首页 文章

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

提问于
浏览 次
2

我有一个安装了PrimeNG套件的Angular2应用程序 .

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

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

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

问题

enter image description here

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" 属性，代码可以正常工作，但我需要将其设置为可编辑...

感谢支持

angular dropdown primeng

3 回答

  • 2

    您可以将整个对象放入其中，而不是在 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 });
    }

  }
);
    回复于
  • 2

    从您的模板看，它似乎尝试使用模型驱动（formcontrolName）和模板驱动（ngModel）方法 .

    这没有意义 .

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

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

    回复于
  • 1

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

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

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

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

    回复于

相关问题