角显示的FireStore根据返回的布尔值如果文档的FireStore存在，其检查的一个按钮(Ang

请求的行为：
在角度视图，这取决于检查是否一个公司的FireStore文件存在的角服务的返回布尔值显示按钮

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

问题
当我打电话从它始终记录所述部件的功能[object Promise]和予得到的TS棉绒错误： 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; } } 

我Component类：

 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:

在组件打字稿你有属性，它是布尔值，你是在分配给在构造函数中的承诺。

将你的代码ngOnInit添加async之前的关键字和分配followState使用关键字前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以验证是否存在对象，并返回一个可观测的结果的。 随着快照的变化，使该值可以动态地改变：

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>

文章来源: Angular Firestore display a button depending of a returned boolean which checks if an Firestore document exist