如何访问数组的每个对象

Question

我在访问每个对象的数组时遇到问题，请查看我的响应结构。

 {
      "status": "1",
      "status_text": "Success",
      "current_page": 1,
      "next_page": "0",
      "previous_page": "0",
      "total_page": 1,
      "total_products": "5",
      "data": {
        "products": [
          {
            "product_id": "51",
            "name": "Arm Rocker",
            "description": "",
            "meta_title": "arm rocker",
            "meta_description": "",
            "model": "AutoSpare",
            "image": "http://192.168.1.6/opencart/image/catalog/demo/product/armRocker-200x200.jpg",
            "options": [
              {
                "product_option_value_id": "45",
                "name": "Bangalore Auto",
                "quantity": "12",
                "sku": "56876",
                "price": "100.00",
                "salesprice": "50"
              },
              {
                "product_option_value_id": "51",
                "name": "Hyderabad Auto",
                "quantity": "23",
                "sku": "56543",
                "price": "200.00",
                "salesprice": "60"
              },
              {
                "product_option_value_id": "52",
                "name": "Delhi Auto",
                "quantity": "14",
                "sku": "98767",
                "price": "300.00",
                "salesprice": "80"
              }
            ]
          },
          {
            "product_id": "57",
            "name": "Avenger",
            "description": "<p>Hi, This is for testing....</p>",
            "meta_title": "avenger",
            "meta_description": "",
            "model": "AutoSpare",
            "image": "http://192.168.1.6/opencart/image/catalog/demo/product/avengerDtsi-150x150.jpg",
            "options": [
              {
                "product_option_value_id": "48",
                "name": "Bangalore Auto",
                "quantity": "68",
                "sku": "978675",
                "price": "200.00",
                "salesprice": "150"
              },
              {
                "product_option_value_id": "49",
                "name": "Delhi Auto",
                "quantity": "67",
                "sku": "86757",
                "price": "300.00",
                "salesprice": "250"
              },
              {
                "product_option_value_id": "50",
                "name": "Hyderabad Auto",
                "quantity": "54",
                "sku": "98765",
                "price": "400.00",
                "salesprice": "350"
              }
            ]
          }
]
    }

在上面的 json 结构中，我有一个 data 对象，其中我有一个 products 数组，我在该数组中有两个对象

这里的 catprodArray 是 products 数组

每个对象都有 options 数组，我试图在 html 部分中实现的内容如下所示。

<div class="product" *ngFor="let category of catprodArray">
   <div>{{category.image}}</div>
   <ion-item>
                        <ion-label>price</ion-label>
                        <ion-select [(ngModel)]="price">
                          <ion-option value="f" *ngFor="let item of category.option[]">{{item.sku}}</ion-option>

                        </ion-select>
                    </ion-item>
</div>

在我的 ion-select 选项中，我试图访问该 options 数组，但我收到了类似

的错误

    browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token ] at column 35 in [ngFor let item of category.option[]] in CategoryProductDetailsPage@105:33 ("-label>price</ion-label>
                        <ion-select [(ngModel)]="price">
                          <ion-option value="f" [ERROR ->]*ngFor="let item of category.option[]">{{item.sku}}</ion-option>

                        </ion-select>

Answer 1

<ion-option value="f" *ngFor="let item in category.product_id.option[]">{{item.sku}}</ion-option>

应该是这样的

<ion-option value="f" *ngFor="let item of category.product_id.option[]">{{item.sku}}</ion-option>

更新试试这个-

<ion-option value="f" *ngFor="let item of category?.options">{{item.sku}}</ion-option>

我们在变量末尾使用?（Elvis 运算符），同时获取来自某种 Web API 或 JSON 的异步数据 通过使用这个 angular2 将防止我们在数据不可查看时抛出任何错误 在这里阅读更多

• http://www.syntaxsuccess.com/viewarticle/elvis-operator-in-angular-2.0