angular2+ 数据检测报错NG0100问题

Question

angular10项目中，开发环境下经常遇到数据检测报错

重现过程：
1.按以往写Vue的操作，在类里面声明一个变量并赋值为false;
2.在html中使用该变量控制元素显示与否

3.点击搜索按钮，触发ajax时loading=true;返回结果后loading= false;如图：

4.控制台报错如图1

问题：这个错误如何触发的？如何避免？

Answer 1

这个错误只会在dev模式提示。因为在dev模式 每一轮数据检测会触发两遍，第二遍就是为了确保数据和第一轮一致。如果不一致就会提示这个错误
changeDetection: ChangeDetectionStrategy.OnPush的时候，在js中修改变量不会出发检测，所以导致前后数据不一致

可以这样解决

constructor(private cdr: ChangeDetectorRef) {...}

this.loading = true
this.cdr.detectChanges()