angular 2 view rendert vor dem Laden von Daten in ngOnInit

Question

Ich benutze Github API, um Benutzer und seine Anhänger Daten in meiner angular 2 App zu laden, aber anzeigen rendert bevor ngOnInit beendet Daten laden und deshalb erhalte ich: Cannot read property of undefined Fehler. Mein Codefragment sieht wie folgt aus:

ngOnInit() { 
    Observable.forkJoin(
     this._githubService.getUser('kaxi1993'), 
     this._githubService.getFollowers('kaxi1993') 
    ) 
    .subscribe(res => { 
     this.user = res[0]; 
     this.followers = res[1]; 
    }, 
    null, 
    () => { 
     this.isLoading = false; 
    }); 
} 

wenn ich HTML-Code wie folgt schreiben:

<div *ngIf="user && user.avatar_url"> 
    <img class="media-object avatar" [src]="user.avatar_url" alt="..."> 
</div> 

funktioniert gut, aber gibt Fehler Cannot read property 'avatar_url' of undefined wenn Schreib HTML-Code ohne *ngIf wie folgt aus:

<img class="media-object avatar" [src]="user.avatar_url" alt="..."> 

auch Hinweis: getFollowers funktioniert gut, aber wenn ich mich bewege getFollowers vor in forkJoin Methode dann funktioniert gut und getFollowers brauchen *ngIf um Fehler zu vermeiden. Ist es möglich ohne extra * ngIf Code zu schreiben? irgendwelche Hilfe Jungs, Vielen Dank.

Answer 1

Sie können die sicheren Navigation (Elvis) Operator verwenden, um den Fehler wie

<div *ngIf="user?.avatar_url"> 
    <img class="media-object avatar" [src]="user.avatar_url" alt="..."> 
</div> 

oder

<img class="media-object avatar" [src]="user?.avatar_url" alt="...">