Выпадающий выбор по умолчанию в Angular

Question

У меня есть следующая выпадающая реализация в Angular.Но я хочу отобразить Paris по умолчанию, но оно показывает None, хотя я присваиваю значение как 1 следующим образом.

.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

Это происходит потому, что в раскрывающемся списке ожидается, что выбранное значение соответствует одному из ваших параметров.Так как вы сохраняете ваши параметры как объекты, а ваше значение как число, он не может найти соответствие.Самый простой подход для исправления этого - сохранить весь объект как selectedCity, захватывая только значение, когда это необходимо:

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