firefox - Angular2 双向绑定(bind)在 Firefox 上不起作用

Question

我是 Angular 2 的新手。我使用 Typesript 开发了一些表单，它可以与 Chrome 一起使用，但不能与 FireFox(版本 45)一起使用。首先，我尝试了两种浏览器的“双向”数据绑定(bind):Chrome 具有正确的行为，但 FireFox 没有考虑与 ngModel 的绑定(bind)(根据 angular2 的 5 分钟快速入门找到我的示例)。

此外，bootstrap 的日期选择器在 Chrome 上运行良好，但在 Firefox 上运行不佳。

提前致谢

app.component.ts

import {Component, OnInit, Event} from 'angular2/core';
import {FORM_DIRECTIVES, NgForm, NgIf, NgFor} from 'angular2/common';


import {Types} from './types';

@Component({
    selector: 'my-app',
    templateUrl:'./app/app.component.html',
    directives : [
      FORM_DIRECTIVES,
      NgForm,
      NgIf,
      NgFor
    ]
})
export class AppComponent implements OnInit {

  field:any;

  types:Array<string> = Types;

  ngOnInit() {
      this.field= {};
  }

  onChange(event:Event) {
    console.log(this.field.type);
  }
}

app.component.html

<h1>My First Angular 2 App</h1>

<div class="form-group">
<label class="col-sm-2 control-label"> Select </label>
<div class="col-sm-4">

<select class="form-control"
        [(ngModel)]="field.type"
        (change)=onChange($event)
        title="Type">
   <option *ngFor="#t of types">{{ t }}</option>
</select>
</div>

<hr/>

<label class="col-sm-2 control-label"> Input </label>
<div class="col-sm-4">
  <input type="text"
        class="form-control input-sm"
        [(ngModel)]="field.type"
        placeholder="type">
</div>
</div>

Answer 1

我找到了一个不是很好的解决方案:

• HTML 文件:在我添加的选择标签中 #typeField
• TS 文件:我更改了如下的 onChange 方法:

app.component.ts

import {Component} from 'angular2/core';


import {Types} from './types';

@Component({
    selector: 'my-app',
    templateUrl:'./app/app.component.html'
})

export class AppComponent {

  field:any = {};

  types:Array<string> = Types;

  onChange(event:Event, newValue:any) {
    this.field.type = newValue;
    console.log(this.field.type);
  }
}

app.component.html

<h1>My First Angular 2 App</h1>

<div class="form-group">
<label class="col-sm-2 control-label"> Select </label>
<div class="col-sm-4">

<select class="form-control"
        [(ngModel)]="field.type"
        #typeField
        (change)="onChange($event, typeField.value)"
        title="Type">
   <option *ngFor="#t of types">{{ t }}</option>
</select>
</div>

<hr/>

<label class="col-sm-2 control-label"> Input </label>
<div class="col-sm-4">
  <input type="text"
        class="form-control input-sm"
        [(ngModel)]="field.type"
        placeholder="type">
</div>
</div>