输入元素上的值属性只更新一次

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

您的代码欺骗了更改检测。使用此解决方法，更改检测可以识别所有更改并更新您的 [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