0

我使用 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。generateValues我的其他 API 需要来自和name来自的 value1、value2userDetails和 name 如果存在于 userDetails 中是可选的，然后调用此 API 和类似的移动案例，但最后一种情况总是调用 API，因为它是必需的参数。所以我的问题是如何等待供其他 API 初始化 value1 和 value2 并异步调用它们。以及如何显示微调器，因为我的一些 API 调用是可选的，例如名称、移动设备。在上面的代码中，我调用了this.SpinnerService.hide()结尾，但它在我的 UI 填充值之前隐藏了。

4

0 回答 0