首页 > javascript > Angular Firestore:检查数据是否存在并根据该更新更新全局变量

Angular Firestore:检查数据是否存在并根据该更新更新全局变量 (Angular Firestore: Check if data exist and update a global variable based on that)

问题

请求的行为:
我想创建一个AngularService,它检查某个文档是否存在,并根据结果更新全局变量。

当前状态
该函数成功检查文档是否存在。它还会更新if / else语句中的全局变量。

问题
即使,第一部分运作良好,它总是返回“未定义”。

我该如何解决这个问题?它与功能范围有关吗?

我的服务:

export class ProfileFollowService {

  //global variable which should be updated
  followState: boolean;
  
  constructor(private angularFirestore: AngularFirestore) { }

  checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState = true;
      } else {
          this.followState = false;
      }
    });
    return this.followState;
  }

}


解决方法

followDoc.get()是返回promise的异步函数。为了返回更新的this.followState,你必须等待then

一种方法是使用async / await

async checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    return followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState = true;
      } else {
          this.followState = false;
      }

      return this.followState;
    }); 
  }

在您调用的代码的其他部分,您checksFollow可以输入关键字await并等待响应。

async someMethodToCallChecksFollow() {
    const result = await this.checksFollow();
    console.log(result);
}

如果你想在你的html中使用响应,我建议将followState从primitive更改booleanBehaviorSubject<boolean>然后调用this.followState.next(true)

例如:

export class YourService {
  public followState = new BehaviorSubject<boolean>(false);

  async checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    return followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState.next(true);
      } else {
          this.followState.next(false);
      }

      return this.followState.getValue();
    }); 
  }
}

然后在你的HTML中你可以使用async管道。

<div *ngIf="yourServiceInstance.followState | async">It is true</div>

问题

Requested behaviour:
I would like to create an AngularService which checks if a certain document exists and updates a global variable based on the result.

Current State
The function checks the existence of the document successfully. It also updates the global variable in the if/else statement.

issue
Even, the first part works well, it always returns "undefined".

How can I fix that? Is it related to function scope?

My Service:

export class ProfileFollowService {

  //global variable which should be updated
  followState: boolean;
  
  constructor(private angularFirestore: AngularFirestore) { }

  checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState = true;
      } else {
          this.followState = false;
      }
    });
    return this.followState;
  }

}

解决方法

followDoc.get() is async function that returns promise. In order to return updated this.followState you have to wait for then

one way to do this is to use async / await

async checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    return followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState = true;
      } else {
          this.followState = false;
      }

      return this.followState;
    }); 
  }

In other part of your code where you call checksFollow you can put keyword await and wait for the response.

async someMethodToCallChecksFollow() {
    const result = await this.checksFollow();
    console.log(result);
}

If you want to use the response in your html, I would suggest changing followState from primitive boolean to BehaviorSubject<boolean> and then call this.followState.next(true)

For example:

export class YourService {
  public followState = new BehaviorSubject<boolean>(false);

  async checksFollow(followingID: string, followerID: string): boolean {
    const followDoc =
    this.angularFirestore.collection(`users/${followingID}/following`).doc(followerID).ref;

    return followDoc.get().then((doc) => {
      if (doc.exists) {
          this.followState.next(true);
      } else {
          this.followState.next(false);
      }

      return this.followState.getValue();
    }); 
  }
}

And then in your html you can use async pipe.

<div *ngIf="yourServiceInstance.followState | async">It is true</div>
相似信息