Angular httpClient 无法读取 undefined 的 undefined

如何解决Angular httpClient 无法读取 undefined 的 undefined

我有一个对象，它构成了我的导航内容。该对象是通过 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 的时间点，菜单对象不存在所以我看到了这个错误.我在这里做错了吗？我一定是。

解决方法

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

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

1. 将模板包裹在 *ngIf 中。

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

2. 使用安全导航操作符

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

3. 使用 async 管道。这也将消除在控制器中处理订阅的开销。

控制器 (*.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>