Question

我通过在模板中将数组与ngFor相关联来填充表格。

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

如果我在本地重新填充数组，这不会发生，所以我假设问题是当每个项从observable加载到数组中时，表正在更新。

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

我相信订阅的第三个参数应该在完成时做一些事情，所以我试图使用它。见下文......

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

然而，这不符合我的预期，我仍然看到渲染问题。有任何想法吗？感谢。

Answer 1

我使用布尔＆＃39;加载＆＃39;在订阅内。

设置＆＃39;已加载＆＃39;默认为false并使用＆＃39; ngIf =＆＃34;已加载＆＃34;围绕你的桌子，然后将其设置在订阅内。

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

当http请求完成时，Angular 2会通知

1 个答案: