firestore valueChanges() 没有立即更新用户数据

Question

我正在使用 Angular 和 Cloud firestore 作为后端。我有一个用户个人资料，一个登录用户和其他具有关注或取消关注操作按钮的用户，基于登录用户的当前关注列表。我希望按钮文本和关注者列表以及关注者在点击事件成功完成后立即在前端更新。但是，只有在路线发生变化或单击按钮两次后，我才能看到更新后的值。

有什么方法可以在关注或取消关注成功后立即更新 loggedUser 和 selectedUser 的数据，并将相同的更新数据反映在我的组件中。

userDetails.component.ts

    ngOnInit(): void {
    this.loggedUser = this.userService.getLoggedUserData();

    //--------Get displayed user data
    this.userService.SelectedUserChanged.pipe(take(1))
    .subscribe(
      (user:User)=>{
        this.user=user;
        if(this.user){
          this.btnToDisplay(); //.....To show follow or unfollow depending on logged user's data
        }}
      );
  }

我有一个 UserService，我在其中订阅了登录用户的 valueChanges()

    fetchLoggedUser(uid: string) {   //Subscribed in the appcomponent using authenticated user's id.
    return this.db.collection('Users').doc(uid)
      .valueChanges()
      .pipe(
        tap((user: User) => {
          this.loggeduser = user;
          this.loggeduser.id = user.userid;
          this.fetchAllUsers();
        })
      );
    }
      
    fetchAllUsers() {
        this.userSubs.push(
          this.db
            .collection('Users')
            .valueChanges({ idField: 'id' })
            .subscribe((users: User[]) => {
              this.allUsers = users;
              this.usersChanged.next([...this.allUsers]);
            })
        );
      }


    selectUser(uid: string) {
        this.selectedUser = this.allUsers.find((user) => user.id === uid);
        this.SelectedUserChanged.next({ ...this.selectedUser });
      }

    getLoggedUserData() {
        return ({...this.loggeduser});
      }

    followUser(uid: string, email: string) {
        this.db.collection('Users').doc(this.loggeduser.userid)
          .update({
            following: firebase.firestore.FieldValue.arrayUnion({
              uid: uid,
              email: email,
            }),
          });
    
        this.db.collection('Users').doc(uid)
          .update({
            followers: firebase.firestore.FieldValue.arrayUnion({
              uid: this.loggeduser.userid,
              email: this.loggeduser.email,
            }),
          });
      }

Answer 1

根据、valueChanges() 和 onSnapshot() 自动 return 他们正在收听的文档或集合发生的更改。 get()用于只获取一次数据

要实现您想要的效果，您需要按照以下说明进行操作 Get real time updates with Cloud Firestore.

基于此文档，我测试了此代码示例，当我更新数据库中的值时，包含更新数据的新文档被 returned。

async function monitorUser(uid){

    const doc = db.collection('users').doc(uid);

    const observer = doc.onSnapshot(docSnapshot => {
        console.log(`Received doc snapshot:`, docSnapshot.data());
    }, err => {
        console.log(`Encountered error: ${err}`);
    });
    
}

然后您可以使用新值更新与您的用户数据相对应的 public 变量，并且应该更新视图。

firestore valueChanges() 没有立即更新用户数据

firestore valueChanges() is not updating userdata instantly

javascript

firebase

angularfire2

angular

google-cloud-firestore