在angular4应用程序中加载数据时显示进度条

Question

我有一个angular 4应用程序，我使用springboot应用程序从数据库中获取数据。 当我打开应用程序时，有一个get返回数据以显示在第一页上。 因此，我想在加载数据时显示进度条，并在加载数据时，删除旋转条并显示数据。

所以，我不知道该怎么做。 现在，这是我的html代码（数据显示在visTimeline ：

 <md-spinner id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>
 <visTimeline (myTask)="returnTask($event)" [tasks]="tasks"></visTimeline>

和ts代码：

    ngOnInit() {
        this.tasks = this.datasService.getTasks();
        if(this.datasService.isLoading == false){
            document.getElementById("isLoadingSpinner").style.display = "none";
        }
    }

这是datas.service中的获取：

    getAffectationsFromDataBase() {
  this.http.get('http://localhost:8081/affectation/findAll').map((response:Response) => {
        this.tasks.tasks = this.transformAffectations(response.json().affectations);
    }).subscribe(result =>  this.isLoading = false);
}

因此，我尝试在ngOnInit函数中使用if并稍等片刻，但是它不起作用。 你知道我该怎么做吗？

Answer 1

之所以不起作用，是因为ngOnInit（）方法是同步的，因此它在页面初始化时运行而无需等待任何响应。

您可以使用[hidden]指令或* ngIf来解决此问题，条件是“ datasService”类中的布尔值。 通过以下方式之一调整HTML代码：

 <md-spinner [hidden]="!datasService.isLoading" id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>

要么

<md-spinner *ngIf="datasService.isLoading" id="isLoadingSpinner" style="margin:0 auto;"></md-spinner>

使用这些实现之一，您无需检查ngOnInit（）中的条件；

Answer 2

我写了一张贴在这里询问如何做一些离子，根据您的角度做事情的方式在这里 。 它满足您的需求。 路由器数据解析器