无法读取未定义的角度2 ngif的属性

Question

我现在能够在视图中获取对象，但是我无法运行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>

错误是

无法读取未定义的属性"蔬菜"

Answer 1

在服务返回（回调）之前，cart对象为 null getPosts$。因此，代码*ngIf="cart.vegetable ...等于*ngIf="null.vegetable ...，直到发生这种情况。这就是正在发生的事情。

您可以做的是放置一个 DOM 元素，其中包含包含其他*ngIf的*ngIf="cart"。例如：

<div *ngIf="cart">
    <h2 *ngIf="cart.vegetable == 'carrot' ">{{cart.vegetable}}</h2>
</div>

*编辑：正如下一个答案中所说，一个好的选择（和良好做法）如下：

<h2 *ngIf="cart?.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

Answer 2

使用安全导航运算符防止异步提取的数据出现null或undefined：

<h2 *ngIf="cart?.vegetable == 'carrot' ">{{cart.vegetable}}</h2>

Answer 3

我在不需要它们的时候使用了{{ }}。摆脱它们为我修复了它。

所以这个

<li *ngIf="{{house}}">

应该是

<li *ngIf="house">