代码之家  ›  专栏  ›  技术社区  ›  Hans

AngularJS:嵌套的http调用不会更新视图

  •  0
  • Hans  · 技术社区  · 6 年前

    在特定场景中,我需要调用githubapi来检索特定用户的信息。然后发出第二个调用以检索用户的存储库:

    search(login: string): void {
           this.user = undefined; 
           // first call               
           this.githubApi.getUser(login)
                .then(user => {
                    this.user = user;
                    // second call
                    this.githubApi.getRepos(user.repos_url)
                        .then(reposResponse => {
                            this.repos = reposResponse.repos;
                            // I don't like to call this.$scope.$apply() !!;
                        });
                });
        }
    

    this.user 在视图中没有问题的情况下进行更新。 执行第二个调用并成功返回结果 this.repos 设置正确。但是,视图上的绑定元素不会更新。

    this.$scope.$apply() 在第二次回调的最后一行,它使视图更新工作,但我猜这不是正确的方法。

    有什么解决办法吗?

    2 回复  |  直到 6 年前
        1
  •  0
  •   haMzox    6 年前

    如果你不愿意 $scope.apply(); ,尝试更新您的 getRepos 服务响应代码:

    setTimeout(
     () => {
      this.repos = reposResponse.repos;
     }, 0
    )
    
        2
  •  0
  •   piet.t Charis A.    6 年前

    你用过 $scope.$apply() ,所以我假设你已经知道了,它是如何工作的,为什么我们要用它。现在,问题来了!

    有时候你回电话的时候- nested callback 特别是-Angular不会更新视图。有时angular认为由于回调,它不需要更新视图。当观察者所观察的变量的值发生变化时,他们不会采取行动。

    然后你用 再次运行摘要循环(假设您已经知道摘要循环,如果您不知道,请告诉我)。它让观察者更新视图。在在您的案例中,摘要周期没有运行,这就是为什么angular没有更新视图。如果您的摘要循环正在运行,angular会给您错误。所以,它会告诉angular再次运行摘要循环,因为双向绑定不能正常工作。