Question

我如何展示＆＃34;评论＆＃34;我的模板中的这个json数据???

（这个json来自ngFor数据）

{
  "product_id": 2,
  "author": 1,
  "category": 2,
  "title": "python",
  "description": "python desc",
  "filepath": null,
  "price": "50000",
  "created_date": "2018-01-28T03:30:00+03:30",
  "updated_date": "2018-01-28T03:30:00+03:30",
  "product_ratings": {
    "p_id": 2,
    "commenter": 1,
    "comment": "very nice totorial",
    "rating": 5,
    "created_date": "2018-02-05T03:30:00+03:30"
  }
}

我确实喜欢下面

my component.html

 <ul>
  <li *ngFor="let data of products">
    <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="http://lorempixel.com/output/technics-q-c-200-200-7.jpg">
    </div>
    <div class="card-content">
      <div>{{ data.title }}</div>
      <div>{{ data.description }}</div>
      <div *ngFor="let rate of data.product_ratings">{{ rate.comment }}</div>
    </div>
    </div>
  </li>
</ul>

但是我收到了这个错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

当我尝试访问评论时：

{{ data.product_ratings.comment }}

我会得到

TypeError: Cannot read property 'comment' of null

浏览器控制台中的

Answer 1

你的product_ratings只是一个对象，而不是数组。您可以使用简单的属性访问权限而不是*ngFor

<div>{{ data.product_ratings?.comment }}</div>

Answer 2

由于data.product_ratings不是数组而只是json，所以这不是Iterables，因为你得到了这个错误。

所以你需要删除：

*ngFor="let rate of data.product_ratings"

并更改

{{ rate.comment }}至{{ data.product_ratings.comment }}

Answer 3

您无法在对象属性中执行ngFor循环。

而不是这一行

<div *ngFor="let rate of data.product_ratings">{{ rate.comment }}</div>

你可以这样做

<div>{{ data.product_ratings.comment }}</div>

NgFor只循环遍历数组，你有一个对象，所以你可以使用简单的点语法访问它的属性。

因此，您只需在绑定之前检查可用的产品评级。您只能获得此信息，因为有时您的ratings

中没有数据

喜欢这个

<div *ngIf="data.prodduct_ratings">{{ data.product_ratings.comment }}</div>

如果您有一个product_rating数组，那么这种语法会有所帮助。

希望有所帮助。

在模板角度5中显示嵌套json数组的项目

3 个答案: