Невозможно реализовать двустороннюю привязку для раскрывающегося списка, находящегося под формой JQuery

Question

У меня есть атрибут [(ngModel)] и (ngModelChange) для выпадающего списка, но если я хочу загрузить любое значение по умолчанию с помощью атрибута [value], то мой ngModel не будет давать текущее значение.

Мне нужно двустороннее связывание при выпадающем списке. В общем, просто выберите раскрывающийся список его работы, проблемы, когда он находится внутри моей формы jQuery. Может ли кто-нибудь помочь в этом? My.Html:

<select class="form-control" name="state" [(ngModel)]="**myClient.address && myClient.address.state**" (ngModelChange)="getCitiesByState($event)" > 
<option class="form-control" *ngFor="let state of states" [ngValue]='state'>{{state.name}} 
</option> 
</select> 

Answer 1

Здесь выпадающий список привязан к ngModel со значением по умолчанию установлено значение "Второй"/"2":

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-native-element-playground', 
    template: ` 
    <select name="option" [(ngModel)]="option"> 
     <option *ngFor="let option of options" [ngValue]="option"> 
      {{ option.name }} 
     </option> 
    </select> 
    {{option | json}} 
    `, 
    styleUrls: ['./native-element-playground.component.css'] 
}) 
export class NativeElementPlaygroundComponent { 
    options = [ 
    { name: 'First', code: '1' }, 
    { name: 'Second', code: '2' }, 
    { name: 'Third', code: '3' } 
    ]; 
    option = this.options[1]; 
}