在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

我寫了一張貼在這里詢問如何做一些離子，根據您的角度做事情的方式在這里 。 它滿足您的需求。 路由器數據解析器