Question

我有一个服务，其中包含一个设置用户聊天名称的函数，然后从所有在线用户的AngularFireStore中获取查询快照，如下所示：

setChatName(chatname) {
  this.afs.collection('users').doc(`${this.userDetails}`)
   .set({'chatname': chatname}, {merge: true})
   .then(() => {
     this.userData = this.afs.collection('users').ref.where('online', '==', true)
      .get()
      .then((querySnapshot) => {
        querySnapshot.docs.forEach(function(documentSnapshot) {
          console.log(documentSnapshot.data()); //outputs correct document snapshot data
          return documentSnapshot.data();
        });
      });
   });
}

我的问题出现在第5行，我正在尝试分配documentSnapshot.data（），我可以在我的控制台中看到正确的服务属性this.userData，它被声明为type，DocumentData。然后，我想在我的聊天组件模板中绑定到这个服务属性，如下所示：

<mat-list>
  <mat-list-item *ngFor="let user of this._authService.userData | async">
    {{user.chatname}}
  </mat-list-item>
</mat-list>

我尝试了几种方法。到目前为止结果未定义或它告诉我，我不能设置undefined的属性。我做错了什么？

Answer 1

无需等到承诺完成才能设置userData;您可以在init中正确执行，在AngularFire集合函数中查询，并使用* changes（）来获取可观察的内容：

init(private afs: AngularFireStore) {
  this.userData = this.afs.collection('users', ref => ref.where('online', '==', true)).valueChanges();
  // ... rest of your init
}

setChatName(chatname) {
  this.afs.collection('users').doc(`${this.userDetails}`).set({'chatname': chatname}, {merge: true})
}

AngularFire如何将模板绑定到服务的Firestore QuerySnapshot

1 个答案: