Question

我正在使用角度2+的ng2-admin主题。我正在使用API来获取数据。我面临的问题是加载器隐藏但数据仍未加载，因此页面首先显示页面的骨架然后加载数据。看起来很奇怪。

我希望加载器显示，直到在页面上呈现所有数据。

首先，我认为它是API响应的问题，但我看到API已经完成，它只是浏览器渲染数据需要时间。对于一个想法，你可以在这个例子中看到

this.loader = ture    
ApiCall.subscribe(response =>{
    logic();
    this.loader = false;
})

Loader获取隐藏但数据仍在呈现。

感谢您的期待。

Answer 1

据我所知，这里有两个解决方案。

如果您有多个回调函数并希望在完成所有回调后获取所有数据，则可以使用Promise.all(iterable) Reference
如果您想在观看加载后通知，请使用ngAfterViewInit Reference

修改尝试使用此代码

this.loader = true ApiCall.subscribe(response => { logic(); setTimeout(() => { this.loader = false; }, 0); });

我认为这两种解决方案都会对您有所帮助。

Answer 2

你可以尝试这样：

 this.loader = true;    
    ApiCall.subscribe(response =>{
        logic();
        setTimeout(() => { this.loader = false; })     
    })

因此，它只会在下一个刻度（更改检测周期）中隐藏加载程序;

Answer 3

在您的主要app.component中尝试

this.router.events.subscribe((event) => {
    if ((event) instanceof RouteConfigLoadStart) {
   //   loader =true ;
    } else if ((event) instanceof RouteConfigLoadEnd) {
    // loader=false;
    }
});

最好为loader编写一个通用服务，并像这样使用它，
this.loaderService.show(); this.loaderService.hide();

显示加载程序，直到页面完全加载Angular 2+

3 个答案: