Angular 无法访问订阅方法之外的数据答案

【问题标题】：Angular Can't access data outside of subscibe methodAngular 无法访问订阅方法之外的数据
【发布时间】：2018-01-15 15:35:29
【问题描述】：

我正在使用带有 angularfire2 的 Firestore 云，我试图访问单个文档的数据以显示到我的模板中，数据仅在订阅方法中可用。

这是我从服务中获取文档的方法

getDataDetails(id: any) {
    this.dataDocumment = this.afs.doc('data/' + id);
    return this.dataDocumment.valueChanges();
}

这是我的 ngOnInit 组件方法

ngOnInit() {
      this.id = this.route.snapshot.params['id'];
      this.dataD = this.dataService.getDataDetails(this.id)
        .subscribe(
      res => {
          this.dataD = res;
          console.log(this.dataD);
      });
      console.log(this.dataD);
      }

订阅范围内的第一个console.log(this.dataD)成功显示文档数据

{adresse: "Rue de France #10", bureau: "78", centre: "Lycée Français", cin: "751-02-785-782-002", commune: "Paris", …}

但第二个显示

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}

知道如何解决这个问题吗？

【问题讨论】：

标签： angular google-cloud-firestore angular-services

【解决方案1】：

您正在尝试访问同步上下文之外的变量在订阅 observable 时，您正在执行异步操作操作和console.log是在一个同步的can文本中所以由当您访问 console.log 中的变量时，它还没有由于订阅处于异步上下文中而填充

您可以做的是尝试在订阅调用本身中执行与该变量相关的所有操作

【讨论】：

您建议我如何在订阅中进行操作？我想要的是能够将文档字段绑定到我的组件模板
这是一个常见的错误，等于一个变量到一个 Observable 并期望我们应该在变量中接收 observable 的值。不是。写 this.data=miservice.method().subscribe(..) 是一个错误。 - 我们唯一得到的是 this.data 变成相同的 observable - 你必须等于订阅中的值：miservice.method().subscribe(res=>this.data=res)。只有当 observable 结束时，我们才能得到 this.data 中的值。（所以在那之前你不能使用 this.data ）。这看起来很让人头疼，但它是 Observables 的基础——因此是 Angular——和...。
..太好了，我们不需要担心 observable 什么时候结束：当 observable 结束时，我们会“神奇地”在屏幕上看到数据