无法读取未定义 angular2 ngif 的属性答案

【问题标题】：Cannot read property of undefined angular2 ngif无法读取未定义 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) 这是一个错字 - 已修复。

标签： javascript angular ionic-framework ionic2

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

【讨论】：