无法读取未定义 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>

*编辑:正如在下一个答案中所说,一个很好的选择(和良好的做法)如下:

&lt;h2 *ngIf="cart?.vegetable == 'carrot' "&gt;cart.vegetable&lt;/h2&gt;

【讨论】:

【参考方案2】:

使用安全导航运算符来防范 nullundefined 异步获取数据:

<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 i18n 无法读取未定义的属性“创建”

在angular2应用程序中运行ng serve时出现错误'无法读取未定义的属性'长度''

无法读取 nativescript angular2 中未定义的属性全局数组

NgZone/Angular2/Ionic2 TypeError:无法读取未定义的属性“运行”

Angular 2:TypeError:无法读取未定义的属性“isRouteActive”

在 Angular 2 中使用 React,错误类型错误:无法读取未定义的属性“渲染”