CODEWITHSUNDEEP
javascriptangularangular5primeng
Maurice
Maurice

Reputation: 7371

p-dropdown is not displaying the labels correctly

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.

enter image description here

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

Upvotes: 2

Views: 15374

Answers (3)

user14821964
user14821964

Reputation: 11

Try this:

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

Note this: optionLabel="value.name"

Upvotes: 1

Ravin Gupta
Ravin Gupta

Reputation: 853

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>

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86730

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.

Upvotes: 3

Related Questions