Angular组件中如何从API获取布尔值并解决异步赋值失效问题

你的核心问题是异步操作的时机问题：fileService.check()是HTTP异步请求，subscribe内的回调会在请求完成后才执行，但你调用check()后立刻访问this.checkData，此时回调还未触发，自然拿到的是undefined。

1. 补全变量声明 #

先在组件类里明确声明checkData：

private checkData: boolean;

2. 修正ngOnInit逻辑 #

要等待异步请求完成后再赋值shouldDisplay，把赋值操作放到subscribe回调内：

ngOnInit() {
  this.check();
}

check() {
  this.fileService.check().subscribe(data => {
    this.checkData = data;
    // 请求完成后再更新视图状态
    this.shouldDisplay = this.checkData;
  });
}

3. 修正update方法逻辑 #

同样要等待check()的异步请求完成后，再判断是否执行更新操作：

update(){
  this.fileService.check().subscribe(data => {
    this.checkData = data;
    if(this.checkData){
      this.fileService.update();
    }else{
      this.notificationService.error('errorMessage');
    }
  });
}

更简洁的替代方案：用Async管道 #

如果不想手动管理订阅，可以把checkData转为Observable，直接在模板使用async管道，Angular会自动处理异步状态：

• 组件类代码：

checkData$: Observable<boolean>;

ngOnInit() {
  this.checkData$ = this.fileService.check();
}

update(){
  this.checkData$.subscribe(data => {
    if(data){
      this.fileService.update();
    }else{
      this.notificationService.error('errorMessage');
    }
  });
}

• 模板代码：

<div *ngIf="checkData$ | async">
  <p> information to display </p>
  <button mat-flat-button type="button" (click)="update()">
     update
  </button>
</div>

内容的提问来源于stack exchange，提问作者static