javascript - 强制输入值( Angular )

Question

我有以下输入

<input type="number" [ngModel]="inputValue" (ngModelChange)="handleChange($event)"/>

我试图强制输入保持小于或等于手动。
使用方法handleChange

export class AppComponent {

  inputValue: number = 0;


  handleChange($event: any) {
    if ($event > 100) {
      this.inputValue = 100;
    }
  }
}

它只在我第一次输入高于 100 的第一个输入时起作用，但在那之后我就不行了。
我的理解是当没有值更新时 DOM 不会更新。
我可以使用 @ViewChild 的其他方法解决这个问题，例如 但我更想知道它是如何工作的，以及 Angular 如何处理这个特定的用例 .
谢谢!

Answer 1

解决办法是引入双向绑定(bind)，让你的属性和html值同步。您还需要强制更改检测 之前 将属性设置为 100。
Stackblitz:https://stackblitz.com/edit/angular-ivy-upykps?file=src/app/app.component.ts
这两个步骤都是变更检测器检测到 所必需的。房产 有 已更改 每次，只有这样它才会使用您的属性值更新 html 值。
盒装香蕉 [(🍌)] 实现了两种绑定(bind)方式符号。
使用 ChangeDetectorRef 强制进行更改检测注入(inject)服务。

<input type="number" [(ngModel)]="inputValue" (ngModelChange)="handleChange($event)"/>

  inputValue: number = 0;

  constructor(private cd: ChangeDetectorRef){};

  handleChange($event: any) {
    this.cd.detectChanges();
    if ($event > 100) {
      this.inputValue = 100;
    }
  }

我知道这有点不直观，但它与变化检测器如何检测变化有关。如果真想看懂，建议加个 debugger在您的功能开始处排队并逐步完成。
我将解释你设置它的方式发生了什么:
html 值通过数据绑定(bind)设置为 0，并且更改检测器注意到该属性当前为 0。在每个单击事件上，运行更改检测 在 之后 ngModelChange打回来。因此，第一次将属性设置为 100 时，更改检测器会看到 - 哦，是的，属性曾经是 0，现在是 100，发生了更改 - 它设置了一个标志，导致 html 更新为新值，并指出该属性当前为 100。
问题是你从未改变 inputValue远离 100 - 因此每次将其设置为 100 - 变化检测器都看不到任何变化。它永远不会再次更新 html。
使用双向绑定(bind)，每当 html 值更改时属性都会更新 - 这会发生 之前 ngModelChange . 但这不会更新变化检测器的状态! 当我们从小于 100 到大于 100 时它会起作用，但是如果我们继续传递更多大于 100 的数字，它将不会被重置。这是因为更改检测运行 之后 ngModelChange ，我们实际上将较大的值覆盖为 100，然后变化检测器才能看到较大的值。我们遇到了同样的问题 - 更改检测器每次都会看到 100，并且不会尝试更新 html。
您需要强制更改检测，以便更改检测器可以记下该属性已更改为这个较大的值。然后将属性设置为 100 后，它会看到 - 是的，属性曾经是这个更大的值，现在是 100 - 它设置了触发 DOM 更新的“已更改”标志。
用户将 html 从 100 更改为 101 的示例:
更改检测器会在每次更改检测时记录当前状态，但不会在数据绑定(bind)期间记录。仅当更改检测器发现更改时才会触发 DOM 更新。

Initial State
ACTUAL
html value: 100
property: 100
CHANGE DETECTOR
property: 100

User changes html value to 101
ACTUAL
html value: 101
property: 100
CHANGE DETECTOR
property: 100

Round bracket data binding updates property
ACTUAL
html value: 101
property: 101
CHANGE DETECTOR
property: 100

handleChange calls ChangeDetectorRef.detectChanges()
ACTUAL
html value: 101
property: 101
CHANGE DETECTOR
property: 100 - CHANGED!
**This is the important part 
the change detector sees that the property changed to 101**

Square bracket data binding attempts to update html because of a change
It's already correct though
ACTUAL
html value: 101
property: 101
CHANGE DETECTOR
property: 101

handleChange changes property to 100
ACTUAL
html value: 101
property: 100
CHANGE DETECTOR
property: 101

change detector detects changes because click event occurred
ACTUAL
html value: 101
property: 100
CHANGE DETECTOR
property: 101 - CHANGED!
**If this was still at 100, no updates would be made. 
There would be a mismatch between property and html value**

Square bracket data binding updates html because of a change
ACTUAL
html value: 100
property: 100
CHANGE DETECTOR
property: 100