Question

我正在尝试在订阅函数中更改变量的内容

test : string="before";
this.peopleService.fetchRandom()
   .subscribe(person => {
       this.person = person;
       this.test = "after";
 });
        console.log(this.test);

您可以看到有问题的变量是test 并将其设置为在lambda函数内部包含“ after”。现在控制台日志显示“ before”，我想知道订阅后是否有一种方法可以等待订阅完成。

希望在console.log中显示“之后”。

//this function is in the service 
fetchRandom(): Observable<any> {
        return this._http.get(this._backendURL.randomPeople);
    }

许多类似问题的答案都使用async-await 但就我而言，这不是我所需要的。

Answer 1

问题与计时有关，具有错误结果的控制台日志是从订阅外部调用的，并且在更新值之前正在执行。您可以在更改值后调用函数以记录正确的结果。

这是因为仅当您的测试变量已更新后，该函数才会在订阅中调用。

以下示例。

public test ='before';
this.peopleService.fetchRandom()
   .subscribe(person => {
       this.person = person;
       this.test = 'after';
       this.laterFunction();
});

public laterFunction: void 
{
    console.log(this.test) // expected 'after'
}

使用Angular时，我发现打开订阅在OnInit生命周期挂钩中工作良好，然后在订阅中调用的单独函数中使用变量，请谨慎保持订阅保持开放状态，因此，如果有更多数据通过“订阅”流这些功能将再次被调用。取决于用例。

Angular 2尝试等待订阅完成，然后再执行代码

1 个答案: