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

Question

I have an Angular web app in which I need to have an editable p-dropdown.

As soon as I changed it from this...

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

to this...

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

the p-dropdown became editable - which is good.

HOWEVER, when the page initially loads it started displaying [object Object] rather than the value of 'name' in the drop-down.

The class that populates the p-dropdown looks like this:

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

So obviously making it editable is making it display the entire MyClass object upon loading rather than just displaying the name value.

I found I could get around this by forcing it upon startup.

Basically I changed this...

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

to this...

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

But that messes things up elsewhere when it thinks it's getting the entire class and it's only getting a single string.

If it's editable, I'm basically having to choose between having the p-dropdown display correctly but behave incorrectly, or having it behave correctly but display an incorrect [object Object] value upon initial load.

Any suggestions?

Thanks much

Answer 1

尝试添加displayProperty = "name"

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