Angular Can'；无法访问变量数据，并且无法在存储中返回它

我从firestore访问文档的代码如下

let data;
this.firestore.collection('groups').doc(tempId).ref.get().then(function(doc) {
  if (doc.exists) {
      data = doc.data();
      console.log("Document data:", doc.data());   // Gives correct data here
  } else {
      console.log("No such document!");
  }
}).catch(function(error) {
    console.log("Error getting document:", error);
});
console.log("Service Data :: " + data); //It says undefined here.

这里，我想将doc.data（）的数据返回给另一个组件。但是，在console.log中（“服务数据：：”+数据）它表示未定义

---

所以，我很困惑，为什么数据变量中没有doc.data（）的值。

这是因为第二个控制台在第一个控制台之前执行，线程将向您的firestore发出请求，然后它将不会等待响应，也不会执行其他代码行。因此，第二个控制台在第一个控制台之前执行

let data;
this.firestore.collection('groups').doc(tempId).ref.get().then(function(doc) {
  if (doc.exists) {
      data = doc.data();
      console.log("Document data:", doc.data());   // first console
  } else {
      console.log("No such document!");
  }
}).catch(function(error) {
    console.log("Error getting document:", error);
});
console.log("Service Data :: " + data); //second console

如果要更改此行为，请调用第一个控制台旁边的第二个控制台

如果要将数据传递给其他组件，请使用

---

这是因为第二个控制台在第一个控制台之前执行，线程将向您的

firestore

发出请求，然后它将不等待响应，而是执行其他代码行。因此，第二个控制台在第一个控制台之前执行

let data;
this.firestore.collection('groups').doc(tempId).ref.get().then(function(doc) {
  if (doc.exists) {
      data = doc.data();
      console.log("Document data:", doc.data());   // first console
  } else {
      console.log("No such document!");
  }
}).catch(function(error) {
    console.log("Error getting document:", error);
});
console.log("Service Data :: " + data); //second console

如果要更改此行为，请调用第一个控制台旁边的第二个控制台

如果要将数据传递给其他组件，请使用

.get（）

方法返回一个承诺，一旦调用

.then（）

，该承诺将异步执行。因此，执行的下一行是

日志（“服务数据：：”+数据）。Javascript并不等待承诺得到解决，而是继续下一个同步行，即第二个控制台

我通常的做法是将整个承诺传递给另一个组件，或者更好，我使用
.doc（）
的
.valueChanges（）
，它返回一个可观察的，并在我传递给的组件中使用异步管道：

// Get Observable on document. Returns Observable<any>
const group$ = this.firestore.doc('/groups' + tempId).valueChanges();

第二个选项，传递到您希望评估可观察对象并显示数据的组件：

<div *ngIf="group$ | async as doc">
  Your html here {{ doc.someProperty }} further html here...
</div>


你的html在这里{{doc.someProperty}}进一步的html在这里。。。

就我个人而言，我更喜欢第二种选择，因为它与框架配合得很好，可以防止我犯异步错误

看看angularfire2的Github文档回购。如果不需要手工在代码中评估可观察性，我不会这样做，而是让框架来处理它

最后一件事：如果您使用observable并希望在使用异步管道时执行一些错误处理，那么您可能希望在创建observable时执行以下操作：

// Get Observable on document. Returns Observable<any>
// In error case, returns Observable of the error string
const group$ = this.firestore.doc('/groups' + tempId).valueChanges()
  .pipe(
    catchError(error => of(`Error getting document: ${error}`))
  );

//在文档上可观察到。可观测收益
//在错误情况下，返回错误字符串的可观察值
const group$=this.firestore.doc（'/groups'+tempId）.valueChanges（）
.烟斗(
catchError（error=>of（`error get document:${error}'））
);
方法
.get（）
返回一个承诺，一旦调用
.then（）
，该承诺将异步执行。因此，执行的下一行是

日志（“服务数据：：”+数据）。Javascript并不等待承诺得到解决，而是继续下一个同步行，即第二个控制台

我通常的做法是将整个承诺传递给另一个组件，或者更好，我使用
.doc（）
的
.valueChanges（）
，它返回一个可观察的，并在我传递给的组件中使用异步管道：

// Get Observable on document. Returns Observable<any>
const group$ = this.firestore.doc('/groups' + tempId).valueChanges();

第二个选项，传递到您希望评估可观察对象并显示数据的组件：

<div *ngIf="group$ | async as doc">
  Your html here {{ doc.someProperty }} further html here...
</div>


你的html在这里{{doc.someProperty}}进一步的html在这里。。。

就我个人而言，我更喜欢第二种选择，因为它与框架配合得很好，可以防止我犯异步错误

看看angularfire2的Github文档回购。如果不需要手工在代码中评估可观察性，我不会这样做，而是让框架来处理它

最后一件事：如果您使用observable并希望在使用异步管道时执行一些错误处理，那么您可能希望在创建observable时执行以下操作：

// Get Observable on document. Returns Observable<any>
// In error case, returns Observable of the error string
const group$ = this.firestore.doc('/groups' + tempId).valueChanges()
  .pipe(
    catchError(error => of(`Error getting document: ${error}`))
  );

//在文档上可观察到。可观测收益
//在错误情况下，返回错误字符串的可观察值
const group$=this.firestore.doc（'/groups'+tempId）.valueChanges（）
.烟斗(
catchError（error=>of（`error get document:${error}'））
);
好的，所以我根据您的评论进行了尝试，它在控制台中给了我一个错误，比如“无法读取未定义的属性'subscribe'”，或者我如何在另一个组件中使用异步管道？实际上，您提供的代码在一个方法get（id:string）中，那么在这个方法中我应该返回什么？以及如何在另一个组件中使用此方法来获取数据。抱歉，必须更新我的代码。见上文。为了传递，您在另一个组件中定义@Input（）变量，并在模板中使用observable（例如….content在更新的代码中，它给出了错误，如“Property”然后“不存在于”obbservable“类型中”，所以我根据您的注释进行了尝试，它在控制台中给了我一个错误，如“无法读取未定义的属性”“subscribe”或者我如何在另一个组件中使用异步管道？实际上，您提供的代码在一个方法get（id:string）中，那么我应该在这个方法中返回什么？以及如何在另一个组件中使用这个方法来获取数据。很抱歉，我必须更新我的代码。请参见上文。要传递，请定义@Input（）变量，并在模板中使用observable（例如….content在更新的代码中，它会给出错误，如“Property”然后“observable”类型上不存在”哦，我明白了。但是如果我想把数据传递给另一个组件，我该怎么办？嗨，对不起，我是新来的，所以你能帮我写代码吗？我试图理解