javascript – 在ngOnInit 中加载数据之前渲染的angular 2视图

参见英文答案 > Angular2 – error if don’t check if {{object.field}} exists1个
我使用github API在我的angular 2应用程序中加载用户及其关注者数据,但在ngOnInit完成加载数据之前查看渲染,因此我收到：
无法读取未定义错误的属性.我的代码片段如下所示：

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>

工作正常,但返回错误无法读取没有* ngIf的HTML代码时未定义的属性’avatar_url’如下：

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

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

解决方法

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