primeng dropdown showing value not label on select

Question

Using https://www.primefaces.org/primeng/#/dropdown the editable version of dropdown with filter

I am seeing that choosing an option shows the value instead of the label when selected.

code

<div class="col-md-5 col-xs-12"><p-dropdown [options]="metaAttributesOptions[n]" [filter]="true" editable="editable" [style]="{'width':'100%'}" *ngIf="metaAttributesOptions[n]" formControlName="value"></p-dropdown>



this.metaAttributesOptions.push(x.options.map(v => {
                            return {
                                label: v.name,
                                value: v.value
                            }
                        }));

Aravind Aravind · Accepted Answer · 2017-05-04T19:36:23

Its because you are not having the label attribute which is expected by primeng Dropdown object's type SelectItem

So you need to modify your json in format of the SelectItem by looping into entire object and creating a custom object of type SelectItem as below,

forEach(serviceData =>(data) {
let color: SelectItem = { 

      label : data.name,
      value : data.id
})

primeng dropdown showing value not label on select

2 Answers