【技巧】ionic3善用数据变更检查

有时候出现model变更了,但是页面没有更新

这个问题是ng2中的变更检测策略造成的,ng2并没有智能到一有数据变更就能自动检测到的,有些特殊情况,并没有触发ng的变更检测。执行变更检测的一些情况有:组件中的输入发生变化、组件中有事件响应、setTimeOut函数等。

解决办法也很简单,ng支持手动触发变更检测,只要在适当的位置,调用变更检测即可。

场景一

利用Cordova插件加载本地图片显示在html中,有时等很久才显示,以为是插件的问题,但是调试的时候,发现图像数据很快就返回了,那猜想是显示的问题,同时发现,当页面切换到其它页面再切换回来时,图片很快就显示了,所以,认为是ts的绑定数据更新了,但是视图页面却没有更新,这个时候,ChangeDetectorRef就派上用场了。

首先,在ts文件头部添加:

import { Component, ChangeDetectorRef } from '@angular/core';

然后在构造函数里注入:

constructor(private cd: ChangeDetectorRef)

最终在更新变量后,手动调用代码,强制页面检查刷新即可:

this.cd.detectChanges();

场景二

假如我有一个form表单要在页面上提交,而表单数据是通过绑定来获取的,而有时候出现这种情况:orderParams.test更改了,但是提交的表单数据没有相应更新到,这个时候ChangeDetectorRef又上场了。

<form id="frmOnline" action="http://test/main.html" method="post">
    <input type="hidden" readonly="true" name="c_id" value="{{orderParams.test}}">
……

简单说明

那这个神奇的ChangeDetectorRef是什么来的?它其实有如下几个方法:

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

我不在此重复造车轮多做描述了,有兴趣的查看此文吧: http://blog.csdn.net/railsbug/article/details/77239509

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

31040
来自专栏非著名程序员

「我真的没有改需求」

12210
来自专栏腾讯NEXT学位

今天我就说三句话

11820
来自专栏非著名程序员

这是对付产品经理的一副毒药,程序员慎入

程序员和产品经理的日常就像是一对天生的冤家,为了需求的实现,几乎天天在争吵。这不,就在昨天各大技术和产品群里一个程序员暴打产品经理的视频火了,被广泛传播。

12920
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18430
来自专栏儿童编程

我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

15810
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏华章科技

穿越十年后看互联网+:家电行业的金矿在哪里?

现在市场上炒得火热的智能家居未来出路在何方?做智能家居的创业者应该注意哪些机会?传统家电厂商又到底如何借助互联网进行转型?本文以智能空调为例,用故事的形式,提前...

8410
来自专栏web前端教室

你可以从面试中学到什么?

讲一下我对面试的一些。。。“偏见”,哈哈,熟悉我的同学们一定要批判的读接下来的内容哈。

12400
来自专栏儿童编程

一张图理清《梅花易数》梗概

学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

32540

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励