Angular httpClient 无法读取未定义的属性未定义答案

【问题标题】：Angular httpClient cannot read property undefined of undefinedAngular httpClient 无法读取未定义的属性未定义
【发布时间】：2021-04-20 15:14:41
【问题描述】：

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

【问题讨论】：

【解决方案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>

【讨论】：

menu?.category 与 menu?.[category] 不同。但问题的作者也可能是错误的
@Andrei 我的菜单是一个包含嵌套对象和数组的对象
然后采取迈克尔的答案，但将?.category 替换为?.[category]
@Andrei：我不会这么说。它必须是点表示法或括号表示法。你不能混合它们。而 AFAIK，安全导航运算符仅适用于点符号。是否可以为?.[category] 表示法制作一个最小的可重现示例？
@Dan：那么我会说最好选择选项 1 或 3。使用选项 2，您需要将所有属性获取替换为安全导航运算符。