javascript - Angular2 OnInit 数据加载太慢导致未定义的 TypeError

Question

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined

我使用“英雄”示例中的相同代码在单个路由中加载详细信息对象。我不断收到此错误，因为我认为在 View 开始渲染之前未加载数据，这就是我收到此错误的原因。

我在显示“currentUser.name”时遇到了这个问题，我通过使用 currentUser?.name 解决了这个问题，但在这种情况下，添加到对象的所有位置是没有意义的带“？”的属性。

我必须在 OnInit 上花费比 heroes 示例更多的时间。因为我需要去拿更多的东西。所以我知道 View 在加载绑定(bind)对象 journal 之前就启动了。

  ngOnInit() {
    this.userService.getUser().then( (user) => {
      this.currentUser = user;
      this.accountsService.getAccounts().then( (accounts) => {
        this.accounts = accounts;
        this.userAccounts = this.currentUser.accounts.map(
          accountId => this.accounts.find(
            elem => elem.id == new String(accountId)
          )
        );
        this.route.params
          .switchMap((params: Params) => this.journalService.getJournal(+params['id']))
          .subscribe( (journal) => {
            console.log("journal", journal);
            this.journal = journal;
          });
        });
      });
  }

如何指示 View 等待数据加载后再开始呈现自身？

或者代码有问题吗？

Answer 1

您可以使用条件包装您的模板。

步骤:

1 - 创建一个变量并使用 falsy 值初始化它:

loaded: boolean = false;

2 - 当您的请求完成时将其设置为 true:

this.route.params
.switchMap((params: Params) => this.journalService.getJournal(+params['id']))
.subscribe((journal) => {
  console.log("journal", journal);
  this.journal = journal;
  this.loaded = true; // -> here
});

3 - 在您的模板中使用*ngIf来防止错误:

<ng-container *ngIf="loaded">
  ... content
</ng-container>