无法读取未定义 angular2 ngif 的属性
Posted
技术标签:
【中文标题】无法读取未定义 angular2 ngif 的属性【英文标题】:Cannot read property of undefined angular2 ngif 【发布时间】:2017-06-18 13:02:22 【问题描述】:我现在可以在视图中获取对象,但是我无法运行 if 语句。根据之前的回答,这就是我引入对象的方式。
public getPosts$(category, limit)
return this.cartService.getPosts(category, limit).map(response =>
return response && response.data && response.data.children;
;
ngOnInit()
this.getPosts$(this.category, this.limit).subscribe(cart =>
this.cart = cart;
我正在尝试运行,但无法获得属性蔬菜。
<h2 *ngIf="cart">cart.vegetable</h2>
<h2 *ngIf="cart.vegetable == 'carrot' ">cart.vegetable</h2>
错误是
无法读取未定义的属性“vegtable”
【问题讨论】:
不确定是否只是一个错字导致您在 if 语句中的cart
之后缺少关闭 "
1) 确切的错误是什么? 2) 你在你的第二个 ngIf 中做一个作业 3) 你在你的第一个 ngIf 中缺少一个 "。
1) 错误是“无法读取未定义的属性 'vegtable'”2) 错字对不起 3) 这是一个错字 - 已修复。
【参考方案1】:
cart
对象为 null,直到服务 getPosts$
返回(回调)。因此,代码*ngIf="cart.vegetable ...
等于*ngIf="null.vegetable ...
,直到发生这种情况。这就是正在发生的事情。
您可以做的是放置一个带有*ngIf="cart"
的DOM 元素,其中包含另一个*ngIf
。例如:
<div *ngIf="cart">
<h2 *ngIf="cart.vegetable == 'carrot' ">cart.vegetable</h2>
</div>
*编辑:正如在下一个答案中所说,一个很好的选择(和良好的做法)如下:
<h2 *ngIf="cart?.vegetable == 'carrot' ">cart.vegetable</h2>
【讨论】:
【参考方案2】:使用安全导航运算符来防范 null
或 undefined
异步获取数据:
<h2 *ngIf="cart?.vegetable == 'carrot' ">cart.vegetable</h2>
【讨论】:
物业蔬菜在那里。如果我将其保留为cart.vegetable
我会得到一个值。我想针对字符串测试该值 我不知道这个功能。谢谢!这应该是公认的答案 - 比包装在另一个元素中要优雅得多,尤其是如果您要访问的属性嵌套在一个对象的深处。 这个操作符是 Angular 还是 JS 的一部分? 在我发布此内容时,它仅适用于 Angular,但有一个 JS/TS 提案。我不知道它是否从那时起实施。我在这个领域工作了一段时间。【参考方案3】:我使用了
,而它们并不需要它们。摆脱他们为我解决了这个问题。
所以这个
<li *ngIf="house">
应该是
<li *ngIf="house">
【讨论】:
以上是关于无法读取未定义 angular2 ngif 的属性的主要内容,如果未能解决你的问题,请参考以下文章
在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度''
无法读取 nativescript angular2 中未定义的属性全局数组
NgZone/Angular2/Ionic2 TypeError:无法读取未定义的属性“运行”