Angular2模型綁定不起作用

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;
}