无法访问变量数据，也无法在 Angular Firestore 中返回它

Question

我从 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("Service Data :: " + data); 中显示未定义。

所以，我很困惑，为什么 data 变量中没有 doc.data() 的值。

Answer 1

这可能是 second console 语句在 first 之前执行的原因。基于线程的执行将向您的 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

如果您想更改此行为，请尝试在第一个控制台旁边调用您的第二个控制台。

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

  public  dataSource = new BehaviorSubject<any>([]);

  this.dataSource.next(doc.data()); 
  console.log("Document data:", doc.data());   // first console

尝试在服务类的帮助下将dataSource 对象传递给您的其他组件。点击此链接了解更多关于angular-behaviorsubject-service的信息

第二个 Component.ts

constructor(private service: Commonservice) { }

someMethod() {
  this.service.dataSource.subscribe((response: any) =>{
    // do something with data
  })
}

Answer 2

.get() 方法返回一个 promise，一旦你调用 .then()，它就会异步执行。因此，执行的下一行是 console.log("Service Data :: " + data);。 Javascript 不会等待 promise 被解析，而是继续执行下一个同步行，即第二个控制台。

我通常这样做的方式是将整个承诺传递给其他组件，或者更好的是，我使用 .doc() 的 .valueChanges() 返回一个 observable，并在我的组件中使用异步管道传递给：

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

然后你有两个选择：

1. 使用group$.subscribe();
2. 将group$传递给您想要的组件并在那里使用异步管道

第一个选项：

// In your component:
let data;
group$.subscribe(doc => {
  if (doc.exists) {
    data = doc
    console.log("Document data:", doc);   // No need to call data().
  } else {
    console.log("No such document!");
  },
  error => console.log("Error getting document:", error);
)

第二个选项，传入您希望评估 observable 并显示数据的组件：

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

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

查看 angularfire2 的 Github 存储库以获取文档 here。如果不需要在代码中手动评估 observable，我不会这样做并让框架处理它。

最后一件事：如果您使用 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}`))
  );