代码执行流程

Question

我来自Java背景。我开始学习Angular2并开始工作。在我的一个项目中，我遇到了一个我无法理解的情况。

对于我的分页实现，我使用Angular2 observables获取数据库中所有可用标书的数量。获取值后，我只是将其登录到控制台，以确保代码正常工作。但它打印未定义。

这是我的代码的相关部分。

this.getNumberOfAllTenders(); 
console.log("number of tenders = "+this._numberOfAllTenders); 

这里是输出

数标段=未定义

以下是这需要投标的数量从后端的方法

getNumberOfAllTenders(){ 
     this._tendersService.getNumberOfAllTenders(). 
      subscribe(

      numberOfAllTenders => this._numberOfAllTenders = numberOfAllTenders, 
      error => this._error_all_numbers = error 

      ); 
      console.log('+++++++++++++++++++ number of tenders in db = '+this._numberOfAllTenders); 
    } 

在上面的代码片段中，还有一行要打印到控制台。该输出也是未定义的。但是，一旦变量被分配了从后端获得的值，该行就会被执行。

我确定，我的服务代码从后端获取值。我试图在我的模板上打印它。它打印正确的值。

现在我的问题是，为什么它在控制台中打印'undefined'。这些变量被正确赋值。据我所知，一旦调用了赋值给变量的函数，这些值应该可用于代码的后面部分。

请在此说明我。 Angular2中的代码执行流程有何不同？

Answer 1

它打印undefined，因为observables运行异步，因此它们在您的console命令运行时没有完成运行。如果你想在可观测的返回值使用console.log，你可以在console命令移到subscribe函数内部：

this._tendersService.getNumberOfAllTenders(). 
      subscribe(
       numberOfAllTenders => { 
       this._numberOfAllTenders = numberOfAllTenders; 
       console.log('+++++++++++++++++++ number of tenders in db = '+this._numberOfAllTenders); 
       }, 
       error => this._error_all_numbers = error 
      ); 

当与您的组件，从观测得到的值变量时，它可以是最好有一个默认值，或者，如果必要的话，可以使用null检查与*ngIf：

*ngIf="_numberOfAllTenders" 

你也可以有你的模板订阅观测直接使用的语法如下：

//in component 
this._numberOfAllTenders = this._tendersService.getNumberOfAllTenders(); 

//in template 
{{_numberOfAllTenders | async}} 

这种方式this._numberOfAllTenders是Observable<number>类型。并且您的模板可以使用async管道订阅它，后者在后台调用subscribe并检索该值。

由于角4，你可以使用async内*ngIf报表和值赋给一个局部模板变量：

<div *ngIf="_numberOfAllTenders | async; let myValue">{{myValue}}</div> 

最主要的是可观察到的不同步返回一个值，所以你需要调整你的其他代码来处理。所以，如果你需要，以调用第二个观察到的使用值从一个观察的，你需要在链接的观测，以寻找与flatMap或类似的东西一起：

firstObservable() 
    .flatmap(dataFromFirst => secondObservable(dataFromFirst) 
    .subscribe(dataFromSecond => //do something 

或者如果你需要保存从第一个可观察值继续到第二个值：

firstObservable() 
    .flatmap(dataFromFirst => { 
     this.variable = dataFromFirst; 
     return secondObservable(dataFromFirst) 
    }) 
    .subscribe(dataFromSecond => //do something 

希望这有助于。