【问题标题】:Angular 2 notify when http request is finishedAngular 2在http请求完成时通知
【发布时间】:2016-10-21 19:31:47
【问题描述】:

我正在通过将数组与模板中的ngFor 链接来填充表格。

但是,由于数组是从 HTTP 请求异步填充的,我注意到当新数据从远程服务器加载到数组中时出现轻微的渲染延迟,这会在重新填充表时导致“闪烁”。

如果我在本地重新填充数组,则不会发生这种情况,因此我假设问题是随着每个项目从可观察对象加载到数组中,表正在更新。

我想等到数据完全加载后再在模板中呈现。我一直在尝试的方法是将数据加载到临时数组中,当临时数组完全填充时收到通知,然后将其添加到链接到模板的数组中。

我相信 subscribe 的第三个参数应该完成一些事情,所以我尝试使用它。见下文...

this.dataService.callApi()
    .subscribe(
        response => this.arrayTemp = response.content,
        error => this.response = error.text(),
        () => this.array = arrayTemp
    );

但是,这并没有像我预期的那样工作,我仍然看到渲染问题。有任何想法吗? 谢谢。

【问题讨论】:

  • 你是如何渲染表格的? *ngFor?
  • Http.get() 目前只传递一个事件,因此使用第一个或第三个回调通常没有区别。
  • 你可以像这样添加do(...) 这样.dataService.callApi().do(value => console.log(value)).subscribe(...)` 你会看到交付的内容(您需要导入do

标签: angular observable


【解决方案1】:

我在订阅中使用布尔值“加载”。

将 'loaded' 默认设置为 false 并在您的表格周围使用 'ngIf="loaded",然后在订阅中设置它。

this.loaded = false;
this.dataService.callApi()
    .subscribe(
        (response) => {
          this.arrayTemp = response.content;
          this.loaded = true; 
        }
    );

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-11-29
    • 2017-01-21
    • 2021-05-01
    • 2021-05-23
    • 1970-01-01
    • 2018-07-19
    • 1970-01-01
    • 2018-02-19
    相关资源
    最近更新 更多