firestore valueChanges() 不会立即更新用户数据答案

【问题标题】：firestore valueChanges() is not updating userdata instantlyfirestore valueChanges() 不会立即更新用户数据
【发布时间】：2020-11-10 01:46:48
【问题描述】：

我正在使用 Angular 和云火库作为后端。根据登录用户的当前关注列表，我有一个用户个人资料、一个登录用户和其他用户，它们带有关注或取消关注操作按钮。一旦点击事件成功完成，我希望按钮文本和关注者列表和关注在前端得到更新。但是，我只能在路线发生变化后才能看到更新的值，或者单击两次按钮。

有没有什么方法可以让关注或取消关注成功后，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,
            }),
          });
      }

【问题讨论】：

为了[收听文档中发生的更改]，您需要使用onSnapshot() 方法。您可以使用它来收听一个文档中所做的更改，甚至可以收听一个集合下的所有文档。请检查Firestore documentation，让我知道这是否适合您。
嗨@tzovourn 我浏览了文档，但由于我是 Angular 和 firebase 的新手；我不明白我到底需要在哪里进行更改。文档说使用onSnapshot() 代替get()；但我没有在我的代码中使用get() 方法

标签： javascript angular firebase google-cloud-firestore angularfire2

【解决方案1】：

根据this post、valueChanges() 和onSnapshot() 自动将发生的更改返回到他们正在收听的文档或集合中。 get() 仅用于获取数据一次。

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

根据这个文档，我已经测试了这个代码示例，当我更新数据库中的值时，会返回包含更新数据的新文档。

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}`);
    });
    
}

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

【讨论】：