Angular2监视对象/数组更改(Angular2 final> = 2.1.1)

栏目: JavaScript · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/40784195/angular2-watch-object-array-changes-angular2-final-2-1-1

我想观看一个对象/数组,可以通过服务或控制器例程进行编辑.我以为Observable可以观看一个对象/数组.

我的实现没有对项目的更改做出反应:

private data : Observable<Array<any>>;
  private dataObserver: Observer<Array<any>>;
  private sub : Subscription;
  private items: <Array<any>>;

  ngOnInit() {
     this.items = itemService.getItems();
     this.data = new Observable<Array<any>>(observer =>{
        this.dataObserver = observer;
     });
     this.data.subscribe(
        x => console.log('onNext: %s', x),
        e => console.log('onError: %s', e),
        () => console.log('onCompleted')
     );
     this.dataObserver.next(this.items);
  }


private start(){

  //change values of the array in an interval
  let loop = Observable.interval(250)
  let i=0;
  self.sub = loop.subscribe(() => {
      if(self.items[0]){
        self.items[0].id= i;
        if(i<100) i++;
        else i=1;
      }
  })
}

subsvaltion subsciption对items数组的更改没有反应.它只会在下一个mehtod上触发.另一方面……这对于简单的手表方法来说太麻烦了.

angular-2为我们提供了什么样的变化,就像$scope一样.$watch在angular-1中做了什么?

Angular2提供IterableDiffer(数组)和KeyValueDiffer(对象)以获取有关两个检查之间差异的信息.

NgClass是一个很好的例子 https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/common/src/directives/ng_class.ts#L122

另见 https://angular.io/docs/ts/latest/api/#!?query=differ

一个例子

// inject a differ implementation 
constructor(differs: KeyValueDiffers) {
  // store the initial value to compare with
  this.differ = differs.find({}).create(null);
}

@Input() data: any;

ngDoCheck() {
  var changes = this.differ.diff(this.data); // check for changes
  if (changes && this.initialized) {
    // do something if changes were found
  }
}

翻译自:https://stackoverflow.com/questions/40784195/angular2-watch-object-array-changes-angular2-final-2-1-1


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法竞赛入门经典(第2版)

算法竞赛入门经典(第2版)

刘汝佳 / 清华大学出版社 / 2014-6-1 / CNY 49.80

《算法竞赛入门经典(第2版)》是一本算法竞赛的入门与提高教材,把C/C++语言、算法和解题有机地结合在一起,淡化理论,注重学习方法和实践技巧。全书内容分为12 章,包括程序设计入门、循环结构程序设计、数组和字符串、函数和递归、C++与STL入门、数据结构基础、暴力求解法、高效算法设计、动态规划初步、数学概念与方法、图论模型与算法、高级专题等内容,覆盖了算法竞赛入门和提高所需的主要知识点,并含有大量......一起来看看 《算法竞赛入门经典(第2版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具