记录angular8 ngModel双向绑定页面不生效问题

框架：angular8
ui组件：NG-ZORRO
问题：switch开关，通过js改变开关状态，html视图不生效
代码：
html:

<nz-switch nzCheckedChildren="启动" nzUnCheckedChildren="停止" name="status"  [nzDisabled]="isSwitchState[item.vname]"  [nzLoading]="isSwitchState[item.vname]"[(ngModel)]="item.status" (ngModelChange)="changeState(item)"></nz-switch>

ts:

现象：在changeState()方法中,如图，修改item.status的状态，只有标红框处修改页面视图状态不生效，在subscribe方法中基础修改是生效的，经查询，是由于angualr的变更检测影响，至于具体影响机制，我还没有特别离清楚，需后续在对ChangeDetectorRef进一步了解学习。

解决方案：在更新switch的状态前，调用this.cd.detectChanges()进行手动触发变更检测。

概念：

export declare abstract class ChangeDetectorRef {abstract checkNoChanges(): void; abstract detach(): void;abstract detectChanges(): void;abstract markForCheck(): void;abstract reattach(): void;
}
export abstract class ViewRef extends ChangeDetectorRef {...
}

如上代码所示，changeDetectorRef包含以下方法：
checkNoChanges: 在运行当前的变更检测时，确保没有变化发生；
detach: 禁用掉对当前视图的检查；
detectChanges：在当前视图和他的子视图只允许一次变更检测（是手动触发变更检测的方法之一）；
markForCheck：对所有父组件一直到根组件都启用脏检查；
reattach：把以前分离开的视图重新附加到变更检测树上。视图会被默认附加到这颗树上。

以下两篇文章是我在解决问题时看到的，主要是讲angular变更检测机制的，想深入学习的可以了解：

https://juejin.cn/post/6844903619058368526#comment，
https://juejin.cn/post/6992113040560750623#heading-14

记录angular8 ngModel双向绑定页面不生效问题相关推荐

vue双向绑定有时候不生效处理办法
vue双向绑定有时候不生效处理办法问题:当我们给响应式的对象新增属性时,新增的属性并不会显示到页面中:对于响应式的数组,增加元素.修改数组长度时,数组的这些变化也不会反映到页面中 <templ ...
Angular自定义组件实现ngModel双向绑定
1.自定义组件ts @Component({selector: 'app-custom-tree',templateUrl: './custom-tree.component.html',styles ...
记录vue的双向绑定原理及实现
这里写自定义目录标题思路分析实现过程 1.实现一个Observer 2.实现Watcher 此文章是学习以为大神____chen的 <vue的双向绑定原理及实现> vue数据双向绑定是 ...
Angular里ngModel双向绑定的一个使用例子
源代码: @Component({selector: "app-root",template: `<input [(ngModel)] = "jerry" ...
vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法
文章目录 vue双向绑定原理方法一增加一个基本类型的变量方法二使用整体对象替换方法三使用vue文档提供的方法 vue双向绑定原理 vue深入式响应原理,当我们在data中声明变量对象,Vu ...
uni-app 封装js方、页面的生命周期、数据双向绑定、封装组件
1.在外部封装js方法很多页面都会用到相同的方法,为了代码的复用,可以在外部封装相同的方法在项目中创建一个utils目录,存放外部封装的js方法在utils目录下创建getDate.js文件 e ...
iviewUI组件库中select双向绑定不生效
前端小伙伴们有没有遇到过这样的场景,iviewUI组件库中select双向绑定数据时,修改了绑定值,但是页面中渲染的值还是之前的值,不管是去打印还是使用vue插件去查看变量,均显示绑定值已修改,可是页 ...
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...
通过运行时单步调试弄清楚[(ngModel)]的双向绑定的工作原理
Component HTML: <input type="text" maxlength="40" nz-input placeholder=" ...

记录angular8 ngModel双向绑定页面不生效问题

记录angular8 ngModel双向绑定页面不生效问题相关推荐

最新文章

热门文章