Question

我正在使用Electron＆amp; amp;创建一个使用Angular 2的应用程序。节点。有些测试在服务器上运行，结果逐个输出到名为testResults的全局变量数组中。我可以使用以下方法将其拉入Angular：

declare var testResults: any;

然而，当一个Object被添加到数组时，我没有运气让Angular触发事件。有没有办法观察这个阵列的变化？我试过onChanges和doCheck，但没有运气。

这就是我对我的组件所拥有的：

import {Component, Input, OnChanges, SimpleChange, OnInit} from         'angular2/core';

declare var testResults: any;

@Component({
 selector: 'test-results',
 template: `{{ testResultsItem }}
 `,
})

export class TestResultsComponent implements OnChanges{
  @Input () testResultsItem = testResults;

ngOnChanges(changes: {[ propName: string]: SimpleChange}) {
    console.log('Change detected:', changes[this.testResultsItem].currentValue);
    console.log(this.testResultsItem);
 }
}

当我运行一个setInterval，每秒在控制台中记录该数组时，我确实在控制台中看到了对该数组的更改。它们还在{{testResults}}下的DOM中更新。但是应该有一种方法可以检测到这种变化而不是运行setInterval，对吗？任何帮助，将不胜感激！

这是我尝试使用IterableDiffers的时候：

import {Component, Input, OnChanges, SimpleChange, OnInit, IterableDiffers, ChangeDetectorRef, IterableDiffer, Directive, DoCheck} from 'angular2/core';

declare var testResults: any;

@Component({
selector: 'test-results',
template: `{{ testResultsItem | json }}
 `,
inputs: ['testResults']
 })

export class TestResultsComponent implements DoCheck{

private testResultsItem = testResults;
private differ:IterableDiffer;
constructor(private changeDetector:ChangeDetectorRef, private differs:IterableDiffers) {
 this.differ = differs.find([]).create(null);
}

set testReults(test:any) {
    this.testResultsItem = test;
    if (test && !this.differ) {
      this.differ = this.differs.find(test).create(this.changeDetector);
    }
}
ngDoCheck(){
    if (this.differ) {
        const changes = this.differ.diff(this.testResultsItem);
        if (changes) {
            console.log('FIRE!');
        }
    }
  }
 }

Answer 1

如果你将你的tempalte改为

template: `{{ testResultsItem | json }}

然后Angular2应检测到更改

如何在Angular 2中观察全局服务器端变量的更改

1 个答案: