Как установить выбранное значение в раскрывающемся списке в Angular 5?

Question

У меня есть следующий HTML-код выбора:

<div class="form-group"> 
    <label class="control-label" for="state">State</label>
    <select class="selectpicker" [(ngModel)]="trip.state">
        <option *ngFor="let s of states" [ngValue]="s.state">{{s.state.name}} 
        </option>
    </select>
</div>

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

...
export class Trip1Component implements OnInit {

  @Input() public trip: Trip;
  public countries: Country[] = [];
  public states: State[] = [];
...

loadStates() {
    this.http.get<State[]>(`${this.baseUrl}/States/${this.selectedCountry.code}`, httpOptions).subscribe(
      data => { this.states = data; },
      err => console.error(err),
      () => setTimeout(() => {
        $('.selectpicker').selectpicker('refresh');
    }, 10)
    );
  }

Государственный субъект:

export interface State {
    id: number;
    code: string;
    name: string;
  }

список состояний из консоли: Выбранное состояние не отображается в списке, когда я отображаю строку trip.state.name на странице, я получаю правильное значение! Но выпадающий список не выбран. Я пытался использовать оба [ngValue] = "s" и [ngValue] = "s.state" Отключение происходит из родительского компонента с использованием аннотации @input, как вы можете видеть выше. Есть идеи, как заставить это работать?