Angular2 Двухсторонние привязки не работают в Firefox

Question

Я новичок в использовании Angular 2. Я разработал некоторые формы с Typesript, и он работает с Chrome, но не с FireFox (версия 45). Прежде всего, я попробовал "двустороннее" связывание данных с обоими браузерами: Chrome работает корректно, но FireFox не принимает во внимание связывание с ngModel (найдите мой пример, основанный на 5-минутном кратком запуске angular2).

Кроме того, средство выбора даты начальной загрузки хорошо работает на 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>