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

Question

我使用 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>

工作正常，但是 returns 错误 Cannot read property 'avatar_url' of undefined 编写没有 *ngIf 的 html 代码时，如下所示：

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

另请注意：getFollowers 工作正常，但如果我移动 getFollowers 在 forkJoin 方法中的 getUsers 之前，然后 getUsers 工作正常并且 getFollowers 需要 *ngIf 以避免错误。是否可以在没有额外 *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="...">

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

angular 2 view renders before data loads in ngOnInit

javascript

fork-join

observable

typescript

angular