JQueryフォーム下にあるドロップダウンの双方向バインディングを実装できません

Question

[(ngModel)]と(ngModelChange)属性がドロップダウンにありますが、現在変更されている値を与えないで、[value]属性を使用してデフォルト値をロードしたい場合。

私はドロップダウンでバインディングの双方向が必要です。一般的には、そのドロップダウンの選択、その問題は、その内部の私の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

ここでは、 "第二"/"2" に設定されたデフォルト値でngModelにバインドされたドロップダウンリストである：

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