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?
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'},
];
string[] and the array of objects you're assigning. There also should be quotes surrounding the values.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
Its not necessary to use label and value in dropdown values. You can set optionLabel attribute in p-dropdown. This means value will be read from objects property the same as set in optionLabel attribute and will show up when calling item.label or selectedItem.label.
[{ id: 1, description: 'blah }, { id: 2, description: 'poop'}] Using an object like that as your :options on your <Dropdown>, you can spec optionLabel="description", and it will display your description property value.Getting PrimeNG p-dropdown to work with array of strings is possible, though it is not well documented. I use it sometimes when selecting timezones. There might be cleaner options, but I use ng-template to populate the dropdown and onChange to store the selected string value:
HTML
<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port" (onChange)="storeValue($event)">
<ng-template let-item pTemplate="selectedItem">
{{item}}
</ng-template>
<ng-template let-item pTemplate="item">
{{item}}
</ng-template>
</p-dropdown>
Component.ts
portNames: string[] =["Port 01","Port 02", "Port 03"];
selectedPort="";
storeValue(event) {
console.log(event); //event.value will likely be undefined, check event.originalEvent
this.selectedPort = event.originalEvent.srcElement.innerText;
}
I have a mix response for this that it works for me.
HTML
<p-dropdown [options]="portNames" placeholder="Select a Port" (onChange)="storeValue($event)">
<ng-template let-item pTemplate="selectedItem">
{{item.item}}
</ng-template>
<ng-template let-item pTemplate="item">
{{item.item}}
</ng-template>
</p-dropdown>
Component
portNames = [
{label:'Port 01', value:'p01'},
{label:'Port 02', value:'p02'},
{label:'Port 03', value:'p03'}
];
selectedPort="";
storeValue(event) {
console.log("Selected item value:", event.event.value);
this.selectedPort = event.event.value;
}
