我正在使用PrimeNG的p-dropdown组件。当页面最初加载时,我正在设置ng-model
但下拉列表始终显示第一个元素作为所选元素。
.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'}}
];
在这里,即使我将ng-model
更改为其他城市,纽约也会在下拉列表中显示为选定的纽约。
我认为您的问题出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'}}
查看堆栈闪电战