typescript - A type="number" bemenet nem működik az Angular űrlapban

A következő kódom van

<div class="container">
<form>
    <div class="form-group">
        <input type="number" class="form-control" id="hours" name="hours" 
                [(ngModel)]="hours">

                {{hours}}
        <label for="hours">hr</label>
    </div>

    <div class="form-group">
        <input type="number" class="form-control" id="minutes" name="minutes" 
                [(ngModel)]="minutes">

                {{minutes}}
        <label for="minutes">min</label>
    </div>

    <div class="form-group">
        <input type="number" class="form-control" id="seconds" name="seconds" 
                [(ngModel)]="seconds">

                {{seconds}}
        <label for="seconds">sec</label>
    </div>
</form>

Valamilyen oknál fogva csak az utolsó bemenet működik, és az óra és a perc mezők egyáltalán nem. Csak a HTML fájlt néztem meg, és az úgy tűnik, működik, és minden mezőbe be tudok írni. De Angular használata esetén nem.

Angular komponens osztály

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-pomodoro',
  templateUrl: './pomodoro.component.html',
  styleUrls: ['./pomodoro.component.css']
})
export class PomodoroComponent implements OnInit {
  @Input() private hours: Number;
  @Input() private minutes: Number;
  @Input() private seconds: Number;

  constructor() {

  }

  ngOnInit() {
  }

}

Válasz #1

Távolítsa el a private kulcsszót az @Input() tulajdonság deklarációjából.

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-pomodoro',
      templateUrl: './pomodoro.component.html',
      styleUrls: ['./pomodoro.component.css']
    })
    export class PomodoroComponent implements OnInit {
      @Input() hours: Number;
      @Input() minutes: Number;
      @Input() seconds: Number;

      constructor() {

      }

      ngOnInit() {
      }

    }

Válasz #2

Mit értesz pontosan az alatt, hogy nem működik? Éppen most próbáltam végrehajtani a kódodat a fiddle-ban. Rendben működik. A Chrome-ban nem fogad el karaktereket. A Firefox-ban elfogadja a karaktereket, de érvénytelennek jelöli. https://github.com/angular/material2/issues/4941