PrimeNg p-dropdown Does not Display Array Values

Question

I have component using PrimeNg p-dropdown.
html code:

<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port">
</p-dropdown>

ts portNames decleration:

portNames: string[] =["Port 01","Port 02", "Port 03"];

My Problem is that DropDown Does not Display Values "Port 01","Port 02", "Port 03".

Maybe I have any mistake?

Answer 1

Try adding your dropdown values in label and values

portNames =[
{label:'Port 01', value:'Port 01'},
{label:'Port 02', value:'Port 02'},
{label:'Port 03', value:'Port 03'},
];

Answer 2

portNames should be an array of objects composed of a label and a value (not an array of strings) :

portNames = [
        {label:'Port 01', value:'p01'},
        {label:'Port 02', value:'p02'},
        {label:'Port 03', value:'p03'}
        ];

See Plunker