调用 API aync 依赖于其他 Angular 原生 API 值

问题描述

我使用 angular native 作为前端。在我的应用程序中，登录后我调用 API 并在本地存储中设置 value1,value2。现在在另一个组件中我做了下面的代码。

value1 =''
value2 =''
userdetails : User;

onNgInit() 中的代码

    this.SpinnerService.show()
    if (this.$localStorage.retrieve("value1") !== undefined && this.$localStorage.retrieve("value2") !== undefined){
        this.value1 = this.$localStorage.retrieve("value1")
        this.value2 = this.$localStorage.retrieve("value2")
    }
         // call another api to get some info
           this.activatedRoute.data.subscribe(({ userDetails }) => {
           this.userDetails = userDetails
           if(this.value1 === '' || this.value2 ===''){
            // call api to get value1,value2
            this.service.generateValues().subscribe((res:  HttpResponse<IResponseModel>) => {
             const data = (res.body?.data) ? res.body?.data : ""
             value1 =data.value1
             value2 = data.value2
           });
           }
    
    // call another APIs depends upon these two values
     if(userDetails.name !== '')
      {
          const selectionmodel: ISelectionModel = new SelectionModel();
          selectionmodel.name= userDetails.name
          selectionmodel.value1 = this.value1
          selectionmodel.value2 = this.value2
         this.service.getSelectList(selectionmodel).subscribe((Response: HttpResponse<IResponseData>) => {
      // set values in UI
    });
    }
     if(userDetails.mobile !== '')
      {
          const selectionmodel: ISelectionModel = new SelectionModel();
          selectionmodel.mobile= userDetails.mobile
          selectionmodel.value1 = this.value1
          selectionmodel.value2 = this.value2
         this.service.getSelectList(selectionmodel).subscribe((Response: HttpResponse<IResponseData>) => {
      // set values in UI
    });
    }
    
    const selectionmodel: ISelectionModel = new SelectionModel();
          selectionmodel.email= userDetails.email
          selectionmodel.value1 = this.value1
          selectionmodel.value2 = this.value2
         this.service.getSelectList(selectionmodel).subscribe((Response: HttpResponse<IResponseData>) => {
      // set values in UI
    });
    
      this.SpinnerService.hide();
});

我上面的代码首先从本地存储中获取值，如果值不存在则调用 API 来初始化值，我的所有 API 返回 Observable。我的其他 API 需要 generateValues 中的 value1、value2 和 name 中的 userDetails，如果 userDetails 中存在 name 是可选的，则调用此 API 和移动设备的类似情况，但最后一种情况始终调用API 因为它是必需的参数。所以我的问题是如何等待其他 API 初始化 value1 和 value2 并异步调用它们。以及如何显示微调器，因为我的一些 API 调用是可选的，例如 name、mobile。如在上面的代码中，我在末尾调用 this.SpinnerService.hide()，但它在我的 UI 填充值之前隐藏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular angular-nativescript