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

Question

我有一个 Angular 网络应用程序，我需要在其中有一个可编辑的 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 下拉菜单变为可编辑 - 这很好。

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

填充 p 下拉列表的 class 如下所示：

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

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

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

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

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

对此...

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

但是当它认为它获得了整个 class 而它只获得了一个字符串时，这在其他地方搞砸了。

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

有什么建议吗？

非常感谢

Answer 1

尝试添加 displayProperty = "name"

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

Making a p-dropdown editable makes it display [object Object]