primeng下拉列表显示值不是选择标签

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

Answer 1

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

Answer 2

Issue is that you can't use

editable="editable"

Not sure why.