angular4数据改变,页面没有渲染解决方法

代码块中ts数据进行了更新,view视图保持不变 
可以引入angular4的 ChangeDetectorRef 

//页面引入所需模块
import { ChangeDetectorRef } from '@angular/core';

//注入服务
constructor(public changeDetectorRef:ChangeDetectorRef ) {
 

该方法有以下几种方法:

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}`

markForCheck()方法有时候在angular的zone之后。会不生效
detectChanges() 
检查一遍 变化检测器 (change detector) 和它的子检测器。可以配合 ChangeDetectorRef 来实现局部变化检查。有些時候,对于更新频繁数据量又很大的列表,我们不想 angular 在列表变化的时候马上更新视图,我们可以手动去调用 detectChanges 方法,去强制 angular 检查 组件数据的变化。这样一来,就可以实现自主控制视图更新频率,而不用担心有太大的性能问题了。
checkNoChanges() 
检测该组件及其子组件,如果有变化存在则报错,用于开发阶段二次验证变化已经完成。
detach() 
从变化检测树中分离变化检测器,该组件的变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。当我们在组件上调用 ChangeDetectorRef 的 detach 方法之后,angular 在该组件数据发生变化的时候,不再执行更新视图等操作。
reattach() 
重新添加已分离的变化检测器,使得该组件及其子组件都能执行变化检测。让 angular 在组件数据发生变化的时候重新检测该组件的变化,在该组件数据变化的时候,执行如更新视图的操作。

 

举例:
 if (value) {
      this.ChangeDetectorRef.reattach();
    } else {
      this.ChangeDetectorRef.detach();
    }
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();

转:https://blog.csdn.net/fish_dw/article/details/81019214

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值