Dropdown default selection in Angular - html

Question

I have following dropdown implementation in Angular. But I want to display the Paris as a default , but it shows None even though I assign value as 1 as follows.
.html
<p-dropdown [options]="labels" [(ngModel)]="selectedCity" optionLabel="name" (onChange)="cityChanged($event.value)"></p-dropdown>
.ts
interface City{
name: string;
value: number;
}
export class CityComponent {
selectedCity: number = 1;
constructor() {
this.labels = [
{name: 'None', value: 0},
{name: 'Paris', value: 1},
{name: 'Rome', value: 2},
{name: 'London', value: 3},
{name: 'Istanbul', value: 4},
{name: 'Amsterdam', value: 5},
{name: 'Moscow', value: 6},
{name: 'Zurich', value: 7}
];
}
cityChanged(city : City)
{
this.selectedCity = city.value
}
}

Answer 1

This is happening because the dropdown expects the selected value to match one of your options. Since you are storing your options as objects, but your value as a number, it is unable to find a match. The simplest approach to fix this would be to store the whole object as the selectedCity, grabbing just the value once it is needed:
export class CityComponent {
selectedCity = {name: 'Paris', value: 1};
constructor() {
this.labels = [
{name: 'None', value: 0},
{name: 'Paris', value: 1},
{name: 'Rome', value: 2},
{name: 'London', value: 3},
{name: 'Istanbul', value: 4},
{name: 'Amsterdam', value: 5},
{name: 'Moscow', value: 6},
{name: 'Zurich', value: 7}
];
}
getSelectedValue(): number {
return this.selectedCity.value;
}
cityChanged(city : City) {
this.selectedCity = city;
}
}