1. 发现
最近在做项目的过程中，发现了一些小问题，特在此记录：
html：
<input type="number" [(ngModel)]="num" (ngModelChange)="onNgModelChange($event)">
ts：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
public num: number;
constructor() {}
public onNgModelChange(num: number): void {
this.num = num;
if (this.num > 100) {
this.num = 100;
}
}
}
我的目的是如果输入框中的数字大于 100， 那么就显示 100，然而写完看到页面发现数字大于 100 也能够进行输入，而没有按照预想中的数字停留在 100 上，通过打印功能也发现 ngModel 绑定的值也更新了，但是并没有反应到页面上。
页面没更新.png
1. 解决方法
出现问题的原因是因为，我们的逻辑干扰了 Angular 的检测功能，既然这样，我们重新让它检测一遍：
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
public num: number;
constructor(private cdr: ChangeDetectorRef) {}
public onNgModelChange(num: number): void {
this.num = num;
this.cdr.detectChanges();
if (this.num > 100) {
this.num = 100;
}
}
}
这样页面就能随着数据变化而更新状态啦！这里涉及到了 Angular 的变更检查策略，网上的资料很多，官网说的也很清晰，关键字：
ChangeDetectorRef
--- detectChanges()
--- markForCheck()
