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

Question

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

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

第一个请求是检查用户是否select编辑了对象。

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

如果他还没有 selected 一个对象，他应该得到一个 select 可用对象的列表到 select 其中一个。

首先，我只展示他 select 反对的部分：

<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 调用需要第二个调用。

控制台日志如下：

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、它们的所有组合以及许多其他东西。每个人似乎都有另一种解决方案。每个解决方案都不起作用。

Answer 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 部分。

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

Wait for HTTP Response before show component

http

wait

async-await

angular