p-dropdown is not displaying the labels correctly

Question

I have trouble getting the dropdown component to work. The dropdown seems to detect the items it should display because it widens the itemlist according to the number of items in the array. However the spaces are all blank.

This is the same dropdown box as from the example at https://www.primefaces.org/primeng/#/dropdown (the first one with header 'simple')

However with me it doesn't display anything. I copy pasted the exact same code, the only difference are the imports. When i go to the github repository i can see that they import

import {SelectItem} from '../../../components/common/api';

and

import {DropdownModule} from '../../../components/dropdown/dropdown';

Where I use

import {SelectItem} from 'primeng/api';

and

import {DropdownModule} from 'primeng/dropdown';

When i try to use the imports from github then it says it can find dropdownmodule and selectitem at those locations.

Heres my code:

interface City {

  name: string,

  code: string

}
export class Test implements OnInit {

 cities1: City[];

  selectedCity: City;
  constructor() {
    this.cities1 = [
      {label:'Select City', value:null},
      {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
      {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
      {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
      {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
      {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
  ];
   }

}

heres the html

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

Anyone know how i can fix this?

Thank you

haha wanted to change it to primeNG but you beat me to it, thanks. — Maurice, Jun 05 '18 at 11:52

score 2 · Accepted Answer · answered Jun 05 '18 at 11:47

2

remove optionLabel and code will work -

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" [showClear]="true"></p-dropdown>

OptionLabel : Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.

answered Jun 05 '18 at 11:47

Pardeep Jain

84,110
37
165
215

Glad to know :) – Pardeep Jain Jun 05 '18 at 11:51
removed but same – Irfan Nasim Dec 24 '18 at 06:09
Maybe your use case is different – Pardeep Jain Dec 26 '18 at 05:44

score 1 · Answer 2 · answered Jan 23 '20 at 10:15

1

add optionLabel with the key name from the json array. The key you want to represent as label.

<p-dropdown optionLabel="label" [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" [showClear]="true"></p-dropdown>

answered Jan 23 '20 at 10:15

Ravin Gupta

783
7
13

score 1 · Answer 3 · edited Dec 14 '20 at 09:32

1

Try this:

<p-dropdown 
    [options]="cities1" 
    [(ngModel)]="selectedCity" 
    placeholder="Select a City" 
    optionLabel="value.name" 
    [showClear]="true">
</p-dropdown>

Note this: optionLabel="value.name"

edited Dec 14 '20 at 09:32

Ralpharoo

789
9
21

answered Dec 14 '20 at 08:09

user14821964

11
1

p-dropdown is not displaying the labels correctly

3 Answers3