时间戳

首页 > 解决方案 > p-dropdown does not display correct label when ngModel variable is an object

angular - p-dropdown does not display correct label when ngModel variable is an object

问题描述

I am using PrimeNG's p-dropdown component. When the page loads initially I am setting the ng-model but the drop down shows first element as the selected element always.

HTML

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

TS

this.cities = [
            {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'}}
        ];

Here New York is shown as the selected one in the dropdown even if I change the ng-model to some other city.

标签： angulartypescriptprimengprimeng-dropdowns

解决方案

我认为您的问题出在optionLabel="name"因为您的城市对象不包含名称键。

要么替换它，optionLabel="label"要么更改你的城市对象

{label:'New York', value:{id:1, name: 'New York', code: 'NY'}}

至

{name:'New York', value:{id:1, name: 'New York', code: 'NY'}}

见StackBlitz

推荐阅读