angular 2视图在ngOnInit中加载数据之前呈现

Question

我使用github API在我的角度2应用程序中加载用户及其关注者数据,但在ngOnInit完成加载数据之前查看渲染,因此我收到: Cannot read property of undefined错误.我的代码片段如下所示:

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

如果我写这样的HTML代码:

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

工作正常,但Cannot read property 'avatar_url' of undefined写入HTML代码时返回错误,*ngIf如下所示:

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

还要注意:getFollowers工作正常,但如果我在方法getFollowers之前移动 然后工作正常,需要避免错误.是否可以在没有额外*ngIf代码的情况下编写？任何帮助的人,非常感谢.getUsersforkJoingetUsersgetFollowers*ngIf

Answer 1

您可以使用安全导航(Elvis)运算符来避免错误

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

要么

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