Ome*_*aro 13 javascript arrays asynchronous setinterval angular
我似乎无法在一个array.push函数上获得angular2视图,该函数是从setInterval异步操作调用的.
代码来自setInterval的这个angular plunkr示例:
我想做的是如下:
import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2'
@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
@View({template: `Number of ticks: {{numberOfTicks}}`})
class Cmp {
numberOfTicks = [];
constructor(private ref: ChangeDetectorRef) {
setInterval(() => {
this.numberOfTicks.push(3);
this.ref.markForCheck();
}, 1000);
}
}
@Component({
selector: 'app',
changeDetection: ChangeDetectionStrategy.OnPush
})
@View({
template: `
<cmp><cmp>
`,
directives: [Cmp]
})
class App {
}
bootstrap(App);<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
<script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
<script data-require="jasmine@*" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>如果"numberOfTicks"只是一个数字(如plunker原始示例所示),上面的代码将正常工作,但一旦我将其更改为数组并推送数据,它将不会更新.
我似乎无法理解为什么会这样.
以下行为类似于我在使用setInterval/setTimeout尝试使用新数据点更新angular2中的图形时遇到的问题.
谢谢您的帮助.
Thi*_*ier 19
在添加元素后,您需要更新数组的整个引用:
constructor(private ref: ChangeDetectorRef) {
setInterval(() => {
this.numberOfTicks.push(3);
this.numberOfTicks = this.numberOfTicks.slice();
this.ref.markForCheck();
}, 1000);
}
}
编辑
DoCheck界面也可能让您感兴趣,因为它允许您插入自己的变化检测算法.
有关详细信息,请参阅此链接:
这是一个示例:
@Component({
selector: 'custom-check',
template: `
<ul>
<li *ngFor="#line of logs">{{line}}</li>
</ul>`
})
class CustomCheckComponent implements DoCheck {
@Input() list: any[];
differ: any;
logs = [];
constructor(differs: IterableDiffers) {
this.differ = differs.find([]).create(null);
}
ngDoCheck() {
var changes = this.differ.diff(this.list);
if (changes) {
changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
}
}
}
如果"numberOfTicks"只是一个数字,上面的代码将正常工作,但一旦我将其更改为数组并推送数据,它将不会更新.我似乎无法理解为什么会这样.
这是因为数字是JavaScript基元类型,而数组是JavaScript引用类型.当角度变化检测运行时,它用于===确定模板绑定是否已更改.
如果{{numberOfTicks}}是基本类型,则===比较当前值和先前值.所以价值观0和1不同.
如果{{numberOfTicks}}是引用类型,则===比较当前值和先前(引用)值.因此,如果数组引用没有改变,Angular将不会检测到更改.在您的情况下,使用push(),数组引用不会更改.
如果您将以下内容放在模板中
<div *ngFor="#tick of numberOfTicks">{{tick}}</div>
然后Angular会更新视图,因为有一个绑定到每个数组元素,而不仅仅是数组本身.因此,如果push()编辑了新项目,或者删除或更改了现有项目,则将检测所有这些更改.
所以在你的图表plunker中,当from和to数组的内容发生变化时,应该更新以下内容:
<span *ngFor="#item of from">{{item}}</span>
<span *ngFor="#item of to">{{item}}</span>
好吧,如果每个项目都是基本类型,它将更新.
| 归档时间： |
|
| 查看次数： |
19997 次 |
| 最近记录： |