Angular httpClient 无法读取属性 undefined of undefined

Question

我有一个对象构成了我的导航内容。该对象是通过 get() 请求获得的，该请求位于导航组件的 ngOnInit() 函数内。使用以下代码，导航功能似乎可以正常工作：

this.httpClient.get(this.url).pipe(map(res => res)).subscribe(res => this.menu = res);

但是控制台显示错误：

ERROR TypeError: Cannot read property 'undefined' of undefined

该错误引用了关联 HTML 中的一行：*ngIf="menu[category]" 但我猜想只有几分之一秒，并且在呈现 HTML 的时间点，菜单对象不存在，所以我看到了这个错误。我在这里做错了什么吗？我一定是。

Answer 1

你是对的。模板在 menu 属性初始化之前呈现，因此会引发错误。

有多种方法可以解决这个问题。

<ng-container *ngIf="!!menu">
  <div *ngIf="menu?.category">
    ...
  </div>
</ng-container>

<div *ngIf="menu?.category">
  ...
</div>

控制器 (*.ts)

export class SomeComponent implements OnInit {
  menu$: Observable<any>;

  ngOnInit() {
    this.menu$ = this.httpClient.get(this.url);
  }
}

模板 (*.html)

<ng-container *ngIf="(menu$ | async) as menu">
  <div *ngIf="menu.category">
    ...
  </div>
</ng-container>

Angular httpClient cannot read property undefined of undefined