Angular 4，输入值绑定，在 UI 中没有改变答案

【问题标题】：Angular 4, input value binding, doesn't change in UIAngular 4，输入值绑定，在 UI 中没有改变
【发布时间】：2018-10-31 01:17:06
【问题描述】：

我无法将输入绑定到角度 4 中的值，例如 [value]="inputFrom"。有时当我更改 inputFrom 时它会改变，而其他时候则不会。如何让输入在inputFrom 更改时始终更改，而不仅仅是有时更改？

您能否建议另一种方法来完成我正在尝试做的事情？

让我详细解释一下我正在尝试做的事情。我有两个输入：

<input [value]="inputFrom" type="number" [min]="inputMin" [max]="inputMax" (focusout)="onInputFromChanged($event.target.value)" />
<input [value]="inputTo"   type="number" [min]="inputMin" [max]="inputMax" (focusout)="onInputToChanged($event.target.value)" />

我有inputMin、inputMax 变量，可以为空。它们指示范围的最小值和最大值。如果它们为空，则表示没有最小值或最大值。

我还有inputFrom 和inputTo，它们绑定到html 输入。

当输入失去焦点时，我调用onInputFromChanged 或onInputToChanged 函数。

我想在这里发生的事情是验证输入值，如果它无效，则用有效值填充它。

真正发生的事情是函数（onInputFromChanged 或 onInputToChanged）被调用，然后 inputFrom 或 inputTo 被更改，但 在浏览器中，大多数时候，旧的值被留下了。

export class AppComponent {
  inputMin = 100; // can be null
  inputMax = 200; // can be null
  inputFrom = 100;
  inputTo = 200;

  onInputFromChanged(valueStr: string): void {
    const value = Number(valueStr);
    if (this.inputMin != null && value < this.inputMin) {
      this.inputFrom = this.inputMin;
    }
  }

  onInputToChanged(valueStr: string): void {
    const value = Number(valueStr);
    if (this.inputMax != null && value > this.inputMax) {
      this.inputTo = this.inputMax;
    }
  }
}

我尝试过的其他事情：

我尝试使用 ngModel。它不会改变行为。
我尝试将oninput="validity.valid||(value='');" 或onfocusout="validity.valid||(value='');" 添加到我的输入元素。但我需要将inputMin 或inputMax 放入值中，而不是空字符串。

【问题讨论】：

标签： html angular typescript data-binding

【解决方案1】：

试试这个

当输入值发生变化时起作用。

export class AppComponent {

inputMin = 100; 
inputMax = 200; 
inputFrom = 100;
inputTo = 200;

handleInputChange(valueStr: string) { 
    const value = Number(valueStr);
    if (this.inputMax != null && value > this.inputMax) {
        this.inputTo = this.inputMax;
    }
    if (this.inputMin != null && value < this.inputMin) {
        this.inputFrom = this.inputMin;
    }
} 
}

<input [ngModel]="inputFrom"   type="number" [min]="inputMin" [max]="inputMax" (change)="handleInputChange($event.target.value)" (ngModelChange)="inputFrom = $event" />

<input [ngModel]="inputTo"  type="number" [min]="inputMin" [max]="inputMax" (change)="handleInputChange($event.target.value)" (ngModelChange)="inputTo = $event"/>

【讨论】：