如何让双向数据绑定 <select> 在 Firefox 中工作 [重复]

Question

更新：我在github 上得到了答复。该错误将在 Angular 2 beta 16 中修复。

这是<select> 的简单双向数据绑定。

Live demo using plnkr.

@Component({
  selector: 'my-app',
  template: `
    <select [(ngModel)]="product.partCode">
      <option *ngFor="#part of parts" [value]="part.code">{{part.name}}</option>
    </select>
    <select [(ngModel)]="product.levelCode">
      <option *ngFor="#level of levels" [value]="level.code">{{level.name}}</option>
    </select>
    {{product|json}}
  `
})
export class App {
  product = { partCode: 'aa', levelCode: 'lv1' };
  parts = [
    { code: 'aa', name: 'AA' },
    { code: 'bb', name: 'BB' }
  ];

  levels = [
    { code: 'lv1', name: 'Level 1' },
    { code: 'lv2', name: 'Level 2' }
  ];
}

当您选择一个新选项时，{{product|json}} 可以显示它的变化。这在 Chrome、Safari 和 Opera 中运行良好。

但是，当我使用 Firefox Developer Edition 47.0a2 和 Firefox Nightly 48.0a1 时，{{product|json}} 不会改变。我怎样才能让它在 Firefox 中也能工作？谢谢

或者它可能是一个错误？我应该向 Angular 2 还是 Firefox 报告？

Answer 1

看起来 选择双向数据绑定 在 Firefox 上存在错误，我尝试使用 Angular2 文档中的示例： https://angular.io/resources/live-examples/forms/ts/plnkr.html 和你的问题一样。

在修复错误之前，您可以用更旧的时尚代码替换，例如：

import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <select (change)="selectPart($event)">
      <option *ngFor="#part of parts" [value]="part.code">{{part.name}}</option>
    </select>
    <select (change)="selectLevel($event)">  
      <option *ngFor="#level of levels" [value]="level.code">{{level.name}}</option>
    </select>
    {{product|json}}
  `
})
export class App {
  product = { partCode: 'aa', levelCode: 'lv1' };
  parts = [
    { code: 'aa', name: 'AA' },
    { code: 'bb', name: 'BB' }
  ];

  levels = [
    { code: 'lv1', name: 'Level 1' },
    { code: 'lv2', name: 'Level 2' }
  ];

  selectPart($event) {
    this.product.partCode = $event.target.value; 
  }

  selectLevel($event) {
    this.product.levelCode = $event.target.value;
  }
}

更新插件：http://plnkr.co/edit/4cHCyBrSI932LOKKcxEN?p=preview