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

我要打印產品名稱（例如在我們的案例中為“沙漠提​​拉米蘇”）。 但是我沒有任何結果。 我的錯誤在哪里？

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>