如何在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>