angular - 无法为 JQuery 表单下的下拉菜单实现两种方式绑定

Question

我有一个下拉列表[(ngModel)]的(ngModelChange)属性，但是如果我想使用[value]属性加载任何默认值，我的 ngModel 不会给出当前更改的值。

我需要在下拉菜单上进行两种绑定。一般来说，它只是一个选择下拉菜单，它在我的 jQuery 表单中时会出现问题。有人可以帮忙吗？我的.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 的下拉列表，默认值设置为“Second”/“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];
}