Angular Firestore 根据返回的布尔值显示一个按钮，用于检查 Firestore 文档是否存在

Question

要求的行为：
根据返回的 Angular 服务的布尔值在 Angular 视图中显示一个按钮，该布尔值检查 Firestore 文档是否存在

当前状态
服务成功检查文档的存在。它还会更新 if/else 语句中的全局变量。我可以在服务中调用该函数，它会记录布尔值，但不会返回它。

问题
当我从组件调用函数时，它总是记录 [object Promise] 并且我得到一个 ts lint 错误：Type 'Promise<Boolean>' is not assignable to type 'boolean'.

我该如何解决？我是否必须将 Promise 转换为布尔值或 Observable？

我的服务：

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 在此之前和分配followState 之前添加async 关键字使用关键字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 组件中，只需从服务中获取 observable。

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>