Angular2 Observable回调

Question

我试图在一个observable完成后实现一个简单的回调，这是我的代码：

ngOnInit() {
    this.propertyService
    .getProperties()
    .subscribe(
        (data: ContentPropertyModel[]) => this.properties = data
    );
    this.status = 'active';
}

但是，在observable运行之前状态会发生变化。 关于如何在观察到运行后改变this.status的任何想法？

Answer 1

将this.status移动到您的订阅处理程序：

ngOnInit() {
    this.propertyService
    .getProperties()
    .subscribe(
        (data: ContentPropertyModel[]) => {
            this.properties = data
            this.status = 'active';
        }
    );
}

Answer 2

订阅包含三个参数（OnNext函数，错误函数，完成函数）。

如果要在收到每个项目后运行代码以运行，则在第一个函数参数中进行编码。 如果要在流完成后运行，则在最后一个函数参数中进行编码。

ngOnInit() {
    this.propertyService
    .getProperties()
    .subscribe(
        (data: ContentPropertyModel[]) => {
            this.properties = data
        },
        (err) => console.log(err),
        () => this.status = 'active'
    );
}

请参阅此链接http://reactivex.io/documentation/observable.html 。

onError（）和Completed（）函数也不适用于DOM事件。

Answer 3

是的，正如另一个答案所指出的，您必须在subscribe处理程序中设置status 。 但是，这也意味着在observable发出第一个项目之前根本不会设置status 。 我建议作为替代制作status本身是一个可观察的，你可以用类似的东西来完成

this.status$ = this.propertyService.getProperties()
  .startWith(false)
  .map(b => b ? 'active' : 'waiting');

现在在模板中显示状态

STATUS IS {{status$ | async}}

并且显示将waiting ，直至观察到第一火灾。

如果您需要在事件处理程序中访问status的当前值，则可以使用

logStatus() {
  this.status$.take(1).subscribe(s => console.log("status is", s);
}

如果你以同样的方式对待properties ，作为一个可观察的，

ngOnInit() {
  this.properties$ = this.propertyService.getProperties();
  this.status$ = this.properties$.startWith(false).map(b => b ? 'active' : 'waiting');
}

那么你可以避免在你的ngOnInit完全订阅，这需要记住然后在ngOnDestroy中ngOnDestroy 。