如何在Angular 4中打印json数组？

Question

这是JSON的样子：

-------------------------------------------------- 
    "id": 2, 
     "user": { 
      "id": 1, 
      "name": "User", 
      "surname": "User", 
      "email": "user@example.com" 
     }, 
     "host": { 
      "id": 1, 
      "name": "Azza" 
     }, 
     "products": [ 
      { 
       "id": 3, 
       "name": "Desert Tiramisu", 
       "price": "2.40", 
       "media_ids": "3,4", 
       "quantity": 1 
      } 
     ], 
------------------------------------------------- 

HTML部分：

<div *ngFor="let item of active_orders"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="col-md-4"> 
      <h4> 
      {{item.products.name}} 
      </h4> 
     </div> 
     </div> 
    </div> 
    </div> 

我想打印products'name（例如，在我们的案例 “沙漠提拉米苏”）。但我没有得到任何结果。我的错误在哪里？

Answer 1

你需要嵌套ngFor因为产品是一个数组

<div *ngFor="let item of active_orders"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="col-md-4" *ngFor="let detail of item.products"> 
      <h4> 
      {{detail.name}} 
      </h4> 
     </div> 
     </div> 
    </div> 
    </div>