輸入元素的值屬性只更新一次

Question

當我在輸入元素中輸入大於1的任何數字時 - 輸入值更改爲1（由於驗證）。出於某種原因，這隻適用於我輸入的第一個號碼。例如，如果我輸入11，輸入值將變爲11，但它應該變爲1.至少我記得它是如何在Angular 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

您的代碼欺騙變化檢測。通過此變通辦法變更檢測可識別所有更改並更新您的綁定。

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