Angular Firestore: проверьте, существуют ли данные, и обновите глобальную переменную на основании

Question

Запрошенное поведение:
Я хотел бы создать AngularService, который проверяет, существует ли определенный документ, и обновляет глобальную переменную на основе результата.

Текущее состояние
Функция проверяет наличие документа успешно. Он также обновляет глобальную переменную в операторе if / else.

выпуск
Даже первая часть работает хорошо, она всегда возвращает "undefined".

Как я могу это исправить? Это связано с областью действия функции?

Мое обслуживание:

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

}

Answer 1

followDoc.get () - асинхронная функция, которая возвращает обещание. Для возврата обновленного 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 с примитива boolean на BehaviorSubject<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 pipe.

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