Question

我有JSON数据

var productName = [
      {
        "id": "2",
        "productName": "BMW",
        "productImage": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/600px-BMW.svg.png",
        "seller": "B",
        "discount": 10,
        "price": 100,
        "data": {
          "subCategory":[

            {
            "name" : "Two Wheeler",
            "productImage" : "http://im.rediff.com/money/2011/jul/01car12.jpg",
            },

            {
            "name" : "Four Wheeler",
            "productImage" : "http://im.rediff.com/money/2011/jul/01car12.jpg",
            },

            {
            "name" : "Farm Equipment",
            "productImage" : "http://im.rediff.com/money/2011/jul/01car12.jpg",        
            }

          ]
        }  
      },

我正在使用Home.html中的点击功能

<ion-slide (click)="infoBrandItem(catName.data);">
 </ion-slide>

//实现功能

infoBrandItem(catName) {
    this.logger.info("invoking Brand item");
    this.navCtrl.push(ProductSubCategoryPage, catName);
    this.logger.debug("cat name object" +JSON.stringify(catName))
  }

我可以在我的控制台中打印子类别数据。如何接收＆＃39; subCategory＆＃39;我的子类别页面中的JSON的详细信息。传递参数NavParams

// subcategory.ts

 _this.catName = this.navParams.get('data');
 _this.logger.debug("printing data " + _this.catName);

// subcategory.html

<ion-item> {{ catName }}</ion-item>

我在控制台中获取输出

INFO：调用Brand项目 logger.ts:24 DEBUG：cat name object {＆＃34; subCategory＆＃34;：[{＆＃34; name＆＃34;：＆＃34; Two Wheeler＆＃34;，＆＃34; productImage＆＃34;：＆＃34; http://im.rediff.com/money/2011/jul/01car12.jpg＆＃34;}，{＆＃34; name＆＃34;：＆＃34; Four Wheeler＆＃34;，＆＃34; productImage＆＃34;：＆＃34; {{ 3}}＆＃34;}，{＆＃34; name＆＃34;：＆＃34; Farm Equipment＆＃34;，＆＃34; productImage＆＃34;：＆＃34; http://im.rediff.com/money/2011/jul/01car12.jpg＆＃34 ;}]}

DEBUG：打印数据未定义

如何在子类别页面中接收数据。请参阅我更新的问题

Answer 1

下面

*ngFor="let catName of brandName" (click)="infoBrandItem(catName);"

您正在发送代表JSON

的这一部分的catName

{
  "id": "2",
  "productName": "BMW",
  ...
  ...
},

这就是你打印时的原因

_this.logger.debug("printing data " + _this.catName);

您看到[object Object]。

如果您想访问subcategory数据，您首先要通过_this.catName.data.subCategory获取该数组。但请记住，它是一个数组，所以如果你想打印每个元素的细节，你将不得不使用像

这样的循环。

for(let i=0; i<_this.catName.data.subCategory.length; i++) {
  _this.logger.debug("printing data " + this.catName.data.subCategory[i].name);
}

Answer 2

可能设置公共变量products并存储您的产品数组，然后存储在模板中：

<ion-row class="brandNameSlideSize">
        <ion-slides pager [options]="mySlideOptionsCategory">
           <ion-slide *ngFor="let product of products" (click)="infoBrandItem(product);">
               <img class="imageCat" src={{product.productImage}}>
               <p>{{product.productName}}</p>
          </ion-slide>    
        </ion-slides>
      </ion-row>

当您获得的产品数组不仅仅是产品名称时，您还会有误导性的变量名称，例如getProductName

此功能应命名为getProducts或getCategoryProducts或类似

你可以阅读js约定here

如何接收一个对象数组this.NavParam.get（＆＃34; some string＆＃34;）

2 个答案: