p-dropdown 未正确显示标签

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

Answer 1

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.

Answer 2

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>

Answer 3

Try this:

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

Note this: optionLabel="value.name"