Question

我在html视图中显示对象详细信息时遇到问题（使用ionic2）。以下输出cart.ts文件中的正确值（输出胡萝卜）。

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

然而，当我尝试在视图中输出它时，它不再让我查看页面。我因为错误而假设。

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

如果我只输出对象，我会在标题

中获得[object Object]

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

看起来错误是＆＃34;无法读取属性＆＃39;蔬菜＆＃39;未定义＆＃34;。我如何在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);
    });
  }

答案：我按照下面的帖子，但不得不在通话前把回程

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>

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

1 个答案: