Angular httpClient 无法读取 属性 undefined of undefined
Angular httpClient cannot read property undefined of 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
属性 初始化之前呈现,因此会引发错误。
有多种方法可以解决这个问题。
- 将模板包裹在
*ngIf
检查中。
<ng-container *ngIf="!!menu">
<div *ngIf="menu?.category">
...
</div>
</ng-container>
- 使用安全导航运算符
<div *ngIf="menu?.category">
...
</div>
- 使用
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>
我有一个对象构成了我的导航内容。该对象是通过 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
属性 初始化之前呈现,因此会引发错误。
有多种方法可以解决这个问题。
- 将模板包裹在
*ngIf
检查中。
<ng-container *ngIf="!!menu">
<div *ngIf="menu?.category">
...
</div>
</ng-container>
- 使用安全导航运算符
<div *ngIf="menu?.category">
...
</div>
- 使用
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>