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?

Mancy Saxena · Accepted Answer · 2018-03-20T07:33:45.827

11

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'},
];

edited Mar 20 '18 at 07:33

answered Mar 20 '18 at 07:25

Mancy Saxena

152
6

There's a mismatch between `string[]` and the array of objects you're assigning. There also should be quotes surrounding the values. – Antikhippe Mar 20 '18 at 07:29
yes I referred to https://www.primefaces.org/primeng/#/dropdown and have made changes. Thanks :) – Mancy Saxena Mar 20 '18 at 07:34

score 6 · Answer 2 · answered Mar 20 '18 at 07:22

6

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

answered Mar 20 '18 at 07:22

Antikhippe

6,316
2
28
43

can i use other diff object properties instead of label an value ? or is it necessary object array must have lablel and value . – naila naseem Oct 16 '18 at 15:53
Yes you can use *optionLabel* if you want to specify another property for the field name of the option. – Antikhippe Oct 16 '18 at 17:25

score 2 · Answer 3 · answered Feb 28 '19 at 10:03

2

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.

answered Feb 28 '19 at 10:03

Renato Urajnar

29
1

1

can you please give solution in code pls for this problem. – Feng Zhang Jun 08 '21 at 20:41
@FengZhang: `[{ id: 1, description: 'blah }, { id: 2, description: 'poop'}]` Using an object like that as your `:options` on your ``, you can spec `optionLabel="description"`, and it will display your description property value. – Brent Jun 10 '21 at 21:07

score 1 · Answer 4 · answered Mar 29 '21 at 17:31

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;
}

score 0 · Answer 5 · answered Sep 29 '21 at 15:47

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;
    }

PrimeNg p-dropdown Does not Display Array Values

5 Answers5

Linked