在显示组件之前等待 HTTP 响应答案

【问题标题】：Wait for HTTP Response before show component在显示组件之前等待 HTTP 响应
【发布时间】：2021-03-06 16:47:45
【问题描述】：

多次发现这个问题。每次都有另一种解决方案。已经尝试了很多，但没有任何效果。于是我又问了一遍：

我尝试在加载两个 API 请求后显示一个组件（部分）。

第一个请求是检查用户是否选择了一个对象。

如果他选择了一个对象，他应该得到他选择的对象。

如果他没有选择一个对象，他应该得到一个可选择对象的列表来选择其中一个。

首先，我只在他选择了反对的情况下才显示该部分：

<div *ngIf="alreadySelected">
  You have selected object {{ selectedObject }}
</div>

这是打字稿：

    ngOnInit(): void {
    console.log(1);
    this.objectService.getIsObjectAlreadySelected("someuser").subscribe(
      data => {
        console.log(2);
        this.initTheComponent(data);
      }
    );
    console.log(99);
  }
  
  initTheComponent(data: any): void {
    console.log(3);
    if (data.selected) {
      this.objectService.getSelectedObject("someuser").subscribe(
        data => {
          console.log(4);
          this.alreadySelected = true;
          this.selectedObject = data.selectedObject;
        }
      );
    }
    if (!data.selected) {
      this.objectService.findAll().subscribe(
        data => { 
          console.log(5);
          this.alreadySelected = false;
          this.selectableObjects = data; 
        }
      );
    }
  }

还有服务：

  public getSelectedObject(username: String): Observable<any> {
    const url = 'some/url/bar';
    return this.http.get<any>(url, this.httpOptions);
  }

  public getIsObjectAlreadySelected(username: String): Observable<any> {
    const url = 'some/other/url/foo';
    return this.http.get<any>(url, this.httpOptions);
  }

  public findAll(): Observable<MyObject[]> {
    return this.http.get<MyObject[]>("some/other/url");
  }

问题在于第二个 API 调用需要第一个 API 调用。

控制台日志如下：

1
2
3
99
<some errors because selectedObject is undefined>
4

我尝试得到以下输出：

1
2
3
4
<no errors>
99

我可以将 selectedObject 初始化为=new MyObject()，而不是控制台不打印错误。但比用户最初看到的要多

 You have selected object

几秒钟后：

 You have selected object someGreatObject

在 Angular 显示组件（部分）之前，我该怎么做才能等待这两个 API 调用。

在过去的 7 个小时里，我已经尝试过 await、async、promise、observable、pipe()、.then()、subscribe、subscribe in other subscribe，它们的所有组合以及许多其他事情。每个人似乎都有另一种解决方案。每个解决方案都不起作用。

【问题讨论】：

标签： angular http async-await wait

【解决方案1】：

我有一个可行的解决方案。很简单：

用过的ngIf是我这里最好的朋友：

<div *ngIf="alreadySelected">
  You have selected object {{ selectedObject }}
</div>

我只是为ngIf 设置布尔值在一切都完成内部回调。

  initTheComponent(data: any): void {
    console.log(3);
    if (data.selected) {
      this.objectService.getSelectedObject("someuser").subscribe(
        data => {
          console.log(4);
          this.selectedObject = data.selectedObject;
          this.alreadySelected = true; // <------------------ set this after setting the date
        }
      );
    }
    if (!data.selected) {
      this.objectService.findAll().subscribe(
        data => { 
          console.log(5);
          this.selectableObjects = data; 
          this.alreadySelected = false; // <------------------ set this after setting the date
        }
      );
    }
  }

在未设置布尔值之前，它是未定义的。在未定义之前，ngIf-part 不会被渲染。

【讨论】：