Warte auf asynchrone Daten, die geladen werden müssen, bevor die Komponentenansicht angezeigt wird

Question

Ich habe Probleme mit der async Pipe. Ich muss warten, bis die asynchronen Daten geladen sind, bevor ich versuche, die Ansicht der Komponente zu rendern.

Ich habe versucht, auf diese Frage, wo die elvis Betreiber erwähnt wird:

Wait for Angular 2 to load/resolve model before rendering view/template

ich es wie {{model?['name']}} versucht, aber es scheint nicht, etwas zu tun, weil Winkelstills einen Fehler beschweren sich über nicht in der wirft in der Lage zu lesen name von undefined.

ich initialisieren model auf ngOnInit aber der Laden von Daten an dieser Stelle nicht beendet ist (glaube ich):

ngOnInit() { 

    // If no model is set and the select shouldn't be allowed empty, set the model to the first option 
    if (!this.model && !this.allowEmpty) { 
    this.model = this.options[0]; 
    } 
    // If it should be allowed empty, set it to null which will add an empty class in the markup 
    else if (this.allowEmpty) { 
    this.model = null; 
    } 

    this.onModelChange.emit(this.model); 
} 

es versucht dann vorzeitig dieses Bit zu machen:

<div> 
    <ul> 
    <li> 
     <div>{{model?['name']}}</div> 
     <ul> 
     <li *ngFor="let option of options | async">{{option['name']}}</li> 
     </ul> 
    </li> 
    </ul> 
</div> 

So Was wäre der richtige Weg, dies zu erreichen? Kann ich etwas in der Komponentenklasse festlegen, damit asynchrone Daten vor dem Rendern der Ansicht geladen werden können?

Answer 1

Sie können ? nicht mit []

verwenden Wenn Sie

*ngFor="let option of options | async"> 

dann option in

{{option.name}} 

immer einen Wert hat, weil kein <li ... gemacht wird, wenn options nicht hat noch emittierte Daten.

wäre eine gültige Verwendung und tun, was Sie vorhatten zu tun, aber wie oben erwähnt, sollte es nicht notwendig sein.