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

是的，正如另一个答案中所指出的，您必须在status处理程序中设置subscribe。但是，这也意味着在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中删除。

Angular2 Observable回调

3 个答案: