不要加載頁面，直到所有數據都從服務中檢索

我想在Angular中向瀏覽器顯示一個簡單的數據，但是一旦所有數據都從服務中檢索，我想顯示數據。不要加載頁面，直到所有數據都從服務中檢索

如何做到這一點？

目前即使沒有完成獲取我的數據，頁面也會顯示。

下面是示例代碼

In test.component.ts file 

ngOnInit() { 
    this._service.getQuestions().subscribe(data => { this.questionCollection = data }); 
}

在我的服務

getQuestions() { 
    return this._http.get('assets/questions.json') 
     .map(res => res.json()) 
     .catch(this.handleError); 
}

.html文件

<div> Other text here...... </div> 
<div *ngFor="let col of questionCollection"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
</div>

來源

2016-11-25 wal

你想要發生什麼？要加載的路線，要顯示的加載指標，還是列表不顯示？顯示更多組件代碼也可能有所幫助 – Fiddles

如果要在導出數據之前阻止導航，可以使用auth警衛返回可觀察值。 – 2017-05-24 05:07:04

Angular2提供AsyncPipe，您可以使用。正如醫生說：

異步管道訂閱可觀察或承諾，並返回它發出的最新值。當發出新值時，異步管道將標記要檢查更改的組件。當組件被破壞時，異步管道會自動取消訂閱，以避免潛在的內存泄漏。

閱讀文檔here。

或 - 您可以使用一個標誌。 allDataFetched。使用* ngIf將其綁定到您的HTML：

<div *ngFor="let col of questionCollection" *ngIf="allDataFetched"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
</div>

In component。您可以將此布爾變量初始化爲false。當所有數據加載完畢後，您可以將其設置爲true。

//component file 
    allDataFetched: boolean = false; 
    ngOnInit() { 
     this._service.getQuestions().subscribe(data => { 
      this.questionCollection = data; 
      this.allDataFetched = true; }); 
    }

來源

2016-11-25 06:52:17

我不認爲你可以在同一個元素上使用'* ngFor'和'* ngIf'。爲什麼你需要一個單獨的'allDataFetched'屬性，當你可以看看'questionCollection'是否有一個值來知道訂閱數據是否已經進入？ – 2017-05-24 05:08:43

一個簡單的方法是使用*ngIf

<ng-container *ngIf="questionCollection"> 
    <div> Other text here...... </div> 
    <div *ngFor="let col of questionCollection"> 
    <button type="button" class="btn btn-default">{{col.Text}}</button> 
    </div> 
</ng-container>

來源

2016-11-25 07:27:52

角度提供了一個resolver。如果你想整個組件都要等到數據，你應該使用resolve。如果您希望組件中的某些數據區在數據之前不顯示，只需使用ngIf即可如上進行控制。

來源

2017-05-24 04:45:21 Mavlarn

不要加載頁面，直到所有數據都從服務中檢索

回答

相關問題