我正在使用一个observable将一个列表从服务返回到我的组件，在我的组件中我使用的是ChangeDetectionStrategy.OnPush，在模板中我使用异步管道，希望这会带来一些性能上的好处，因为不会一直执行Change Detection但只有当新内容可用时 .
以下是我的服务：
import { Injectable, Inject, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class ListService {
public _list$: Subject<any[]>;
private list: any[] = [];
constructor() {
this._list$ = <Subject<any>>new Subject();
}
get list$() {
return this._list$.asObservable();
}
loadList() {
//if this.list is populated through an http call the view is updated,
//if its a static list like below, it doesn't trigger view update.
//this.list = ['Red', 'Green', 'Yellow', 'Blue'];
this._list$.next(this.list);
}
}
在我的组件中，我有：
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
templateUrl: `
<ul>
<li *ngFor="let item of (list$ | async);">
{{item}}
</li>
</ul>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent {
public list$: Observable<any[]>;
constructor(
private _ls: ListService
) {}
ngOnInit() {
this.list$ = this._ls.list$;
this._ls.loadList();
}
}
如果loadList内容通过http调用获取列表内容，则视图被更新，如果列表内容是静态的，则视图不会更新 .
如果我在setTimeout中包装list update，它会触发视图更新
setTimeout(() => {
this._list$.next(this.list);
}, 1);
我刚开始探索Observables，有人可以指导上面的代码有什么问题吗？
1 回答
只需将代码从
ngOnInit()移动到构造函数即可 . Angular尝试在调用ngOnInit()之前解析绑定（订阅observable）并失败，因为thod._list$是null并且没有't try later because it doesn't识别更改 .