如何在 angular 订阅方法中为变量赋值

Question

我有一项服务将使用 angularfire 从 firestore 获取数据。获得数据后，我希望将值分配给全局变量，如 this.currentQuantity。但是 this.currentQuantity 的值在 subscribe() 方法之外变得不确定，而在 subscribe 方法中变得正确。

我的component.ts文件

onBuy(){
 this.stockService.GetOverviewStock().subscribe((response) => {
      response.forEach((item) => {
        if (item.StockName == this.selectedStockName) {
          this.currentQuantity = item.Quantity;
          this.currentTotalMoneySpent = item.TotalMoneySpent;
        }
        console.log(this.currentQuantity) // correct value from firestore
      });
    });

 console.log(this.currentQuantity) // undefine
...doSomething(this.currentQuantity) // the value is undefine
}

我的 service.ts 文件从 firestore 获取数据。

  GetOverviewStock() {
    return this.firestore
      .collection<StockModel>("OverviewStock", (ref) => ref.orderBy("StockName", "asc"))
      .valueChanges();
  }

求助，我是新手angular，不太明白为什么以及如何解决。

Answer 1

它将按预期工作，除了 GetOverviewStock() 必须先触发（因此调用订阅和赋值）。最初，这些字段确实是未定义的（或者具有您设置的其他初始值）

Answer 2

Observables 是处理 async 请求的新方法。订阅 Observables 与调用 function 非常相似。但是 Observables 的不同之处在于它们能够 return 称为 streams 的多个值。Observables 不仅能够同步 return 一个值，而且还能够异步地

]

在你的情况下，首先执行第二个 console.log(this.currentQuantity)，它没有用 subscription 初始化，因此你首先得到 undefine，然后你的 subscription 被评估.你可以试试这个：

app.component.ts

ngOnInit() {
  this.stockService.GetOverviewStock().subscribe((response) => {
      response.forEach((item) => {
        if (item.StockName == this.selectedStockName) {
          this.currentQuantity = item.Quantity;
          this.currentTotalMoneySpent = item.TotalMoneySpent;
        }
        console.log(this.currentQuantity) // correct value from firestore
        this.logObservable();
      });
  });
}

logObservable() {
  console.log(this.currentQuantity)
}

此处this.logObservable()已退出订阅，如果您检查它，答案是正确的。所以你应该考虑 async 行为并做这样的事情。

Answer 3

你正在使用异步，所以你必须在 subscribe() 中调用 ...doSomething(this.currentQuantity) （就像@ng-hobby 说的）。简而言之，您无法像您的代码那样在 subscribe() 之外获取 this.currentQuantity 值，您可以阅读有关异步调用的更多信息以了解原因。

如何在 angular 订阅方法中为变量赋值

How to assign value to variable in angular subscribe method

angularfire

angular

google-cloud-firestore