Laden Sie die Seite noch nicht, bis alle Daten vom Dienst abgerufen wurden

Question

Ich versuche, in Angular einfache Daten für den Browser anzuzeigen, aber ich möchte die Daten anzeigen, sobald ALLE Daten vom Dienst abgerufen wurden.

Wie geht das?

Derzeit wird die Seite auch angezeigt, ohne dass die Daten vollständig abgerufen wurden.

Hier ist ein Beispielcode

In test.component.ts file 

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

In meinem Dienst

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> 

Answer 1

Angular2 bietet AsyncPipe-Datei, die Sie verwenden können. Wie die doc sagt:

Das Asynchron-Rohr zu einer beobachtbaren oder Versprechen abonniert haben und gibt den neuesten Wert es emittieren hat. Wenn ein neuer Wert ausgegeben wird, markiert die asynchrone Pipeline die Komponente, die auf Änderungen geprüft werden soll. Wenn die Komponente zerstört wird, wird die asynchrone Leitung automatisch abgemeldet, um mögliche Speicherlecks zu vermeiden.

Lesen Sie die Dokumentation here.

ODER - Sie können eine Flagge verwenden. allDataFetched. Binden Sie es mit Ihrem HTML mit * ngIf:

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

In Komponente. Sie können diese boolesche Variable als false initialisieren. Wenn alle Daten geladen sind, können Sie sie auf true setzen.

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

Answer 2

Ein einfacher Weg ist *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> 

Answer 3

Angular bieten dafür eine resolver zu verwenden. Wenn Sie die gesamte Komponente warten möchten, bis die Daten, sollten Sie resolve verwenden. Wenn Sie möchten, dass ein Datenbereich in der Komponente nicht vor Daten angezeigt wird, verwenden Sie einfach ngIf, um wie oben zu steuern.