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

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

typescript angularjs

Hans · 技术社区 · 7 年前

在特定场景中,我需要调用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 回复 | 直到 7 年前

haMzox 7 年前

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

setTimeout(
 () => {
  this.repos = reposResponse.repos;
 }, 0
)

piet.t Charis A. 7 年前

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

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

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前