Angular Firestore отображает кнопку в зависимости от возвращенного логического значения, которое проверяет, существует ли документ Firestore

Question

Запрошенное поведение:
Отображение кнопки в угловом представлении в зависимости от возвращенного логического значения угловой службы, которая проверяет, существует ли документ Firestore

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

Выпуск
Когда я вызываю функцию из компонента, она всегда записывает [object Promise], и я получаю ошибку ts lint: Type 'Promise<Boolean>' is not assignable to type 'boolean'.

Как я могу решить это? Должен ли я преобразовать обещание в булево или наблюдаемое?

Мой сервис:

export class ProfileFollowService {
    
    // global variable which should be updated
    followState: boolean;
    
    // checks if the document exist and returns a boolean
    async checkFollow(followingID: string, followerID: string): Promise<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;
    });
  }
  
  async callCheckFollow(followingID: string, followerID: string) {
  
    const result = await this.checkFollow(followingID, followerID);
    console.log(result); //logs true or false as requested
    return result;
  }

}

Мой класс компонентов:

export class ServiceTestComponent implements OnInit {

  followState: boolean;
  
  constructor(private followService: ProfileFollowService) {

  // throws TS Lint error: Type 'Promise<Boolean>' is not assignable to type 'boolean'.
    this.followState = this.followService.callCheckFollow('someID', 'someID');
    
   // logs [object Promise], should log true or false
   ngOnInit() {console.log('followstate' + this.followState);}


}

Мой компонент html:

<div *ngIf="followState === true">
  <p>hello Doc</p>
</div>

<div *ngIf="followState === false">
  <p>No doc</p>
</div>

Answer 1

В машинописи компонентов у вас есть свойство, которое является логическим, и вы назначаете его для Promise внутри конструктора.

Переместите свой код в ngOnInit добавьте ключевое слово async до этого и перед назначением followState use ключевое слово await

export class ServiceTestComponent implements OnInit {

  followState: boolean;

  constructor(private followService: ProfileFollowService) { }

   // logs [object Promise], should log true or false
   async ngOnInit() {
     console.log('followstate' + this.followState);

     this.followState = await this.followService.callCheckFollow('someID', 'someID');
   }


}

Answer 2

Немного слепое кодирование, но может ли это сработать?

В службе, использующей Rxjs, чтобы проверить, существует ли объект, и вернуть Observable результата.С изменениями снимка, чтобы значение могло динамически изменяться:

public callCheckFollow(followingID: string, followerID: string): Observable<boolean> {
    return of(this.angularFirestore.collection('users/${followingID}/following').doc(followerID).snapshotChanges().take(1).do(d => d.payload.exists));
}

В компоненте TS просто возьмите наблюдаемое из службы.

export class ServiceTestComponent implements OnInit {

  followState: Observable<boolean>;

  constructor(private followService: ProfileFollowService) {
     this.followState = this.followService.callCheckFollow('someID', 'someID');   
   }
}

А затем в html прослушивать асинхронно для изменений в последующем состоянии.

<div *ngIf="(followState | async)">
  <p>hello Doc</p>
</div>

<div *ngIf="(!followState | async)">
  <p>No doc</p>
</div>