无法在视图中获取对象属性

Question

我无法在 html 视图中显示我的对象详细信息（使用 ionic2）。下面在 cart.ts 文件中输出正确的值（输出胡萝卜）。

this.cart = resultsFromAPI     
console.log(this.cart.vegetable);

但是，当我尝试在视图中输出它时，它不会让我再查看该页面。我假设是因为一个错误。

<h2>{{cart.vegetable}}</h2>

如果我只输出对象，我会在标题中得到 [object Object]

<h2>{{cart}}</h2>

看起来错误是“无法读取未定义的属性 'vegetable'”。如何在 ts 中阅读而不是在视图中阅读？

下面是完整的ts代码

 cart:any;

  ngOnInit(){
    this.getPosts(this.category, this.limit);
  }

  getPosts(category, limit){
    this.cartService.getPosts(category, limit).subscribe(response => {
      this.cart = response.data.children;
      console.log( this.cart.vegetable);
    });
  }

回答： 我关注了下面的帖子，但必须在调用之前将 return 放回

public getPosts$(category, limit) {
  return this.cartService.getPosts(category, limit).map(response => {
       this.cart = response.data.children;
  };
}

Answer 1

这是因为您正在执行异步 API 调用，因此您应该在使用它之前检查它是否可用。此外，您可以通过 async 管道直接将 API 响应用作 Observable。

<h2>{{(cart | async)?.vegetable}}</h2>

对于 OP 编辑​​： 你可以写（fname 末尾的 $ 表示它是一个流）：

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>