kątowe wyświetlanie 2 rzutów przed ładowaniem danych w ngOnInit

Question

Używam API Github do ładowania danych użytkownika i jego obserwatorów w mojej aplikacji kątowej 2, ale wyświetlanie renderuje, zanim ngOnInit zakończy ładowanie danych iz tego powodu otrzymam: Cannot read property of undefined błąd. Mój kod fragment wygląda tak:

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; 
    }); 
} 

jeśli piszę kod HTML tak:

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

działa prawidłowo, ale zwraca błąd Cannot read property 'avatar_url' of undefined gdy kod zapisu html bez *ngIf tak:

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

pamiętać również: getFollowers działa dobrze, ale jeśli przeniosę getFollowers przed w forkJoin metody następnie działa dobrze i getFollowers trzeba *ngIf aby uniknąć błędu. Czy można pisać bez dodatkowego kodu * ngIf? żadnych pomocników, Wielkie dzięki.

Answer 1

Można użyć operatora bezpiecznej nawigacji (Elvis), aby uniknąć błędu jak

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

lub

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