невозможно установить выбранное значение в Angular 5

Question

У меня есть следующий HTML-код выбора, где я могу увидеть список стран, но не может видеть выбранную страну (вместо этого выбран первый элемент в списке):

<select class="selectpicker" [(ngModel)]="trip.country" (ngModelChange)="onSelectCountry($event)">
        <option *ngFor="let c of countries" [ngValue]="c.country">{{c.country.name}}</option>
    </select>

Файл компонента ts:

export class Trip1Component implements OnInit {

  @Input() public trip: Trip;
  public countries: Country[] = [];
  private selectedCountry: Country;

  constructor(private http: HttpClient,
    @Inject(LOCAL_STORAGE) private storage: WebStorageService) {
    this.countries = this.storage.get("countries");
  }

  ngOnInit() {
    this.onSelectCountry(this.trip.country);
    setTimeout(function () {
      $('.selectpicker').selectpicker(); 
    }, 10);

  }

onSelectCountry(val)  {
    this.selectedCountry = val;
  }
...
}

Список стран из консоли:

Объект страны в поездке:

Можете ли вы посоветовать, что следует изменить в коде, чтобы увидеть выбранное значение правильно?

Answer 1

Пожалуйста, попробуйте это

<select class="selectpicker" [(ngModel)]="trip.country" (ngModelChange)="onSelectCountry($event)">
        <option *ngFor="let c of countries" (click)="selectCountry(c)">{{c.country.name}}</option>
    </select>

В TS

selectCountry(val)  {
    this.selectedCountry = val;
  }

Answer 2

Ваше ngValue должно быть просто c

 <option *ngFor="let c of countries" [ngValue]="c">{{c.country.name}}</option>