Angular2中监听数据更新

我不是女神ヾ 2022-05-11 08:06 59阅读 0赞

原文出处：[https://blog.csdn.net/cut001/article/details/70885762][https_blog.csdn.net_cut001_article_details_70885762] （原文更易阅读）

`angular2 模型数据更新了，需要监听数据改变，`

`一、实现接口Docheck，检测页面上所有元素数据更`

1.  `import { Component, DoCheck } from "@angular/core";`
2.  `export class LangListUserComponent implements DoCheck {`

1.  `constructor(private differs: KeyValueDiffers) {`
2.  `}`

1.  `ngOnInit() {`
2.  `this.objDiffer = {};`
3.  `this.list.forEach((elt) => {`
4.  `this.objDiffer[elt] = this.differs.find(elt).create(null);`
5.  `});`
6.  `}`

1.  `ngDoCheck() {`
2.  `this.list.forEach(elt => {`
3.  `var objDiffer = this.objDiffer[elt];`
4.  `var objChanges = objDiffer.diff(elt);`
5.  `if (objChanges) {`
6.  `objChanges.forEachChangedItem((elt) => {`
7.  `if (elt.key === 'prop1') {`
8.  `this.doSomethingIfProp1Change();`
9.  `}`
10. `});`
11. `}`
12. `});`
13. `}`

`二、针对页面上某个元素的数据更新做处理`

`1、定义模板驱动表单名 `

<input type="text" pInputText size="50" \[formControl\]="term" placeholder="输入搜索条件">

2、ts 文件中新建一个表单元素对象。

colo = new FormControl();  
  
3、ngonInit中订阅数据更新

this.colo.valueChanges.distinctUntilChanged().subscribe((ast) => \{

//do something

\})

[https_blog.csdn.net_cut001_article_details_70885762]: https://blog.csdn.net/cut001/article/details/70885762

发表评论取消回复

表情：

评论列表（有 0 条评论，59人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中watch监听数据

watch: { bianliang: { //如果是浅层次的就直接写上变量名不用，深层次的必须加上引号包起来"" // 数

浅浅的花香味﹌/ 2023年10月09日 14:07/ 0 赞/ 40 阅读

相关 Angular命令(持续更新)

创建项目命令(默认创建在当前目录下): ng new [project] 启动项目命令(需要在Angular项目目录下)： ng serve --open

Bertha 。/ 2023年02月21日 11:40/ 0 赞/ 13 阅读

相关 angular监听input事件_angular 监听input单选，多选值的变化

\{ \{item.name\}\}(\{ \{item.cnt\}\}) 页面效果是这样： ![Image 1][] ts的代码是这样的： getCheckList(

迷南。/ 2023年01月08日 15:25/ 0 赞/ 168 阅读

相关 Flutter 数据监听Widget 自动更新你的UI

在开发中，我们很有可能会遇见这种需求： ![95b2e8220609c4f4a04cefffe709d1f2.png][] 这里每一个圆形都是同一个数据。

以你之姓@/ 2022年12月24日 03:57/ 0 赞/ 416 阅读

相关 Angular2中的数据绑定

实现数据绑定首先要在input的上面添加name属性，否则是绑定不上的。添加完成name属性后再在input上面添加ng-model=”绑定的变量” <inpu

墨蓝/ 2022年07月15日 11:39/ 0 赞/ 180 阅读

相关 Angular2中使用bootstrap

下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 ，因此需要先下载 bootstrap ，推荐使用 npm 包的

「爱情、让人受尽委屈。」/ 2022年07月15日 04:54/ 0 赞/ 142 阅读

相关【Angular2】新建Angular2项目

一、前言相信大家已经看了小编上一篇博客，写的挺好的，[《【Angular2】搭建开发环境》][Angular2]，如果你是一个老手，配置好了，怎么可能不去做

淡淡的烟草味﹌/ 2022年06月08日 13:15/ 0 赞/ 244 阅读

相关 angular监听鼠标,键盘事件

关键词:$event 监听鼠标事件 <button (click)="onClick($event)"></button> $event 输出: Mous

以你之姓@/ 2022年05月20日 06:44/ 0 赞/ 676 阅读

相关 Angular2中监听数据更新

原文出处：[https://blog.csdn.net/cut001/article/details/70885762][https_blog.csdn.net_cut001_

我不是女神ヾ/ 2022年05月11日 08:06/ 0 赞/ 60 阅读

相关 Angular 事件监听$scope.$watch

监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数

朴灿烈づ我的快乐病毒、/ 2021年07月25日 02:43/ 0 赞/ 654 阅读