在ngOnInit

时间:2016-06-01 09:49:07

标签: javascript typescript angular observable fork-join

我使用github API在我的angular 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方法getUsers之前的forkJoingetUsers工作正常,getFollowers需要*ngIf以避免错误。 是否可以在没有额外* ngIf代码的情况下编写?任何帮助的人,非常感谢。

1 个答案:

答案 0 :(得分:11)

您可以使用安全导航(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="...">