使 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>