Angular ngModelChange 事件改变 ngMod

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()