问题
最近遇到了一个问题：
最终在这里找到了解决方案：https://angular.io/errors/NG0100。
手动触发变更检测：
通过异步操作，触发变更检测：
总结：
变更检测
什么变化检测？
通过检测视图与状态之间的变化，在状态发生了变化后，帮助我们更新视图，这种将视图和我们的数据同步的机制就叫变化检测。
什么会触发变化检测？
异步操作会触发变化检测。比如：
- 点击事件(浏览器事件)被触发时。
- http 请求。
- 定时器：
setInterval()、setTimeout()。 Promise.resolve().then(() => {});。
生命周期钩子
生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。- 生命周期的
开始：当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。 - 生命周期的
结束：当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。
执行顺序
| 钩子 | 说明 |
|---|---|
| ngOnChanges() | 在 @Input()修饰的属性值发生变更时会触发该钩子的调用。否则不会调用。 |
| ngOnInit() | 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。肯定会调用且只会调用一次。 |
| ngDoCheck() | 自定义变更检测逻辑 |
| ngAfterContentInit() | 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。响应内容中的变更 |
| ngAfterContentChecked() | 响应被投影内容的变更 |
| ngAfterViewInit() | 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。响应视图变更 |
| ngAfterViewChecked() | |
| ngOnDestroy() |
学习资源
Angular 变化检测详解
NG0100: Expression has changed after it was checked
https://blog.angular-university.io/angular-debugging/