javascript - 代码执行流程

Question

我有 Java 背景。不久前我开始学习 Angular2 并致力于它。在我的一个项目中，我遇到了一种我无法理解的情况。

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

这是我代码的相关部分。

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

这是输出

number of tenders = undefined

以下是从后台获取投标数量的方法

 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在 observable 的返回值上，你可以移动 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
            );

当在组件中使用从可观察对象获取值的变量时，最好有一个默认值，或者如果需要，使用 *ngIf 进行空检查。 :

*ngIf="_numberOfAllTenders"

您还可以使用如下语法让您的模板直接订阅可观察对象:

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

//in template
{{_numberOfAllTenders | async}}

这边this._numberOfAllTenders类型为 Observable<number> .您的模板可以使用 async 订阅它管道，调用subscribe在后台并检索值。

从 Angular 4 开始，您可以使用 async里面*ngIf语句并将值赋给局部模板变量:

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

最主要的是 observable 不会同步返回值，因此您需要调整您的其他代码来处理它。因此，如果您需要使用一个 observable 的值来调用第二个 observable，则需要考虑将 observable 与 flatMap 链接在一起。或类似的东西:

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

或者如果你需要在继续第二个之前保存第一个可观察值的值:

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

希望这对您有所帮助。