Angular 混合应用程序 - 模型未更新选择

Question

我正在开发一个混合 Angular/AngularJS 应用程序。 包含下拉框的表单正在迁移到 Angular。此迁移的控件在 Firefox 和 Edge 中按预期工作，但是，在 Chrome 中，仅当您更改选项卡然后切换回来时，迁移选择的模型才会更新。 在所有浏览器上，processCounty() 函数都会在更改时正确触发

AngularJS 表单中的下拉代码

<select class="form-control"
        ng-model="angularJS.countryCode" 
        ng-init="angularJS.countryCode = defaultCountryCode" 
        ng-change="controller.processCountry($event);" 
        required>
  <option value="" selected>(Select Country)</option>
  <option ng-repeat="country in countries | uppercase | orderBy:'name'" value="{{country.isoCode}}">{{ country.name }}</option>
</select>

针对同一元素重构了 Angular 代码

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="angularJS.countryCode" 
      (ngModelChange)="controller.processCountry($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [ngValue]="country.isoCode">{{country.name | uppercase}}</option>
</select>

Answer 1

尝试将

[ngValue]

更改为

[value]

也许可以解决问题！

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="angularJS.countryCode" 
      (ngModelChange)="controller.processCountry($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [value]="country.isoCode">{{country.name | uppercase}}</option>
</select>