使 p 下拉菜单可编辑使其显示 [object Object]

Question

我有一个 Angular 网络应用程序，我需要在其中有一个可编辑的 p 下拉菜单。

一旦我从这个改变它......

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

到这...

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

p 下拉菜单变得可编辑 - 这很好。

但是，当页面最初加载时，它开始在下拉列表中显示 [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>