入力要素のValueプロパティは一度だけ更新されます

Question

入力要素に1より大きい任意の数値を入力すると、入力値が1に変わります（検証のため）。何らかの理由で、これは最初に入力した番号に対してのみ機能します。たとえば、11を入力すると、入力値が11に変わりますが、1に変わります。少なくとも、それは角度1で動作したことを覚えています。何が起きているのか？ここで

import { Component } from '@angular/core'; 
@Component({ 
    template:` 
    <input 
    type="number" 
    (input)="validate($event.target.value)" 
    [value]="duration"> 
    <p>{{duration}}</p>` 
}) 
export class OneComponent{ 
    duration: number; 
    constructor(){ 
    this.duration = 0; 
    } 
    validate(value){ 
    if(value > 1) { 
     this.duration = 1; 
    } 
    else { 
     this.duration = value; 
    } 
    } 
} 

はあなたのコードが変更検出をだましているplunker（one.component.ts）

Answer 1

です。この回避策では、変更検出はすべての変更を認識し、[value]="duration"バインディングを更新します。

export class OneComponent{ 
    duration: number; 
    constructor(private cdRef:ChangeDetectorRef){ 
    this.duration = 0; 
    } 
    validate(value){ 
    this.duration = -1; 
    this.cdRef.detectChanges(); 
    if(value > 1) { 
     this.duration = 1; 
    } 
    else { 
     this.duration = value; 
    } 
    this.cdRef.detectChanges(); 
    } 
} 

Plunker example