使 p-dropdown 可编辑使其显示 [object Object]

Question

我有一个 Angular Web 应用程序，我需要在其中有一个可编辑的 p-dropdown。

只要我从这里改变它......

<p-dropdown [options]="myOptionsForMyForm" optionLabel="name" appendTo="body"></p-dropdown>

到这个...

<p-dropdown [options]="myOptionsForMyForm" optionLabel="name" appendTo="body"   editable="true"></p-dropdown>

p-dropdown 变得可编辑 - 这很好。

但是，当页面最初加载时，它开始显示 [object Object] 而不是下拉列表中的“name”值。

填充 p-dropdown 的类如下所示：

 export class MyClass {
    name: string;
    displayOrder: number;
 }

显然，让它可编辑是让它在加载时显示整个 MyClass 对象，而不仅仅是显示名称值。

我发现我可以通过在启动时强制它来解决这个问题。

基本上我改变了这个......

this.myForm.setValue({
  'myOption': MyClass
});

到这个...

this.myForm.setValue({
  'myOption': MyClass.name
});

但是当它认为它正在获取整个类并且它只获取一个字符串时，这会在其他地方搞砸。

如果它是可编辑的，我基本上必须在让 p-dropdown 正确显示但行为不正确，或者让它行为正确但在初始加载时显示不正确的 [object Object] 值之间做出选择。

有什么建议吗？

非常感谢

Answer 1

尝试添加 displayProperty = "name"

<p-dropdown [options]="myOptionsForMyForm"  displayProperty = "name"  optionLabel="name" appendTo="body"   editable="true" ></p-dropdown>