Question

我尝试更新Angular 2中的输入值，它在第一次大小值超过maxSize时起作用，但是后来它不再起作用了。似乎当我将this.size设置为某个值时，UI没有更新，我是否忽略了什么？

HTML：

<input type="text" class="form-control" [value]="size" (input)="size = updateValue($event)">

代码：

export class BrushSizePicker {
@Input() minValue;
@Input() maxValue;
@Input() size;

increaseValue(event) {
this.size++;

this.checkValue();
}

decreaseValue(event) {
this.size--;

this.checkValue();
}

updateValue(event) {
this.size = parseInt(event.target.value);
this.checkValue();

return this.size;
}

private checkValue() {
if (this.size > this.maxValue) {
  this.size = this.maxValue;
}
if (this.size < this.minValue) {
  this.size = this.minValue;
}

}

编辑：我记录了发生的事情：每次使用正确的输入调用checkValue，它返回正确的值。但新值未设置到输入字段/值字段

Answer 1

虽然它可能无法解决问题，但您可以简化实现输入事件的方式。我会这样写，副作用自由函数：

updateValue(event) {  // The method name with this change is a misnomer
   return this.checkValue(parseInt(event.target.value));
}

private checkValue(item) {
 if (item > this.maxValue) {
   return this.maxValue;
 }
 else if (else < this.minValue) {
   return this.maxValue;
 }
 return item;
}

Angular2模型绑定不起作用

1 个答案: