控制器无法识别对象属性

时间:2017-10-04 23:25:32

标签: angularjs

这是我在MLab中定义的产品文档的摘录:

 {
"_id": {
    "$oid": "596161e1734d1d25634366ce"
},
 "images": {
    "regular": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
    ]
   }
}

这是Mongoose中相应模型的摘录:

const ProductSchema = new Schema({
    images:{}
});

var Product = mongoose.model('Product', ProductSchema, 'product');
module.exports=Product;

我试图访问控制器中的图像对象:

init = function () {
        $scope.product = DataService.getProduct();
        console.log('productController.product = ', $scope.product)
        $mainImage = $scope.product.images.regular[0];
        $productImages = $scope.product.images.regular;
    };

但是我收到以下错误:

angular.js:14700 TypeError: Cannot read property 'regular' of undefined
at init (productController.js:8)
at new <anonymous> (

我在Angular 2中遇到了类似的问题,并且能够通过在我的模型中使用任何类型定义我的图像对象来解决它:

images: any;

如何在Angularjs中解决这个问题?

添加个人信息:

getProduct() {
   return $filter('filter')(products, {'_id': productId});
}

getProduct()生成的产品:

    [
  {
"_id": "596161e1734d1d25634366ce",
"producttype": "stove",
"name": "30 in. 4.8 cu. ft. Electric Range in Stainless Steel",
"brand": "Amana",
"model": "AER6303MFS",
"price": 199.9,
"list_price": "301.00",
"description": "This 30 in. Amana Electric Range comes with Bake Assist Temps to help you get dinner going. Simply choose a preset temperature setting to get started. Or, set your bake or broil temperatures with Easy Touch Electronic Controls Plus, which are extra-large and easy-to-read. And when you need to know how your dinner is doing without opening the oven door, the Extra-Large Oven Window lets you see and savor.",
"rating": 5,
"sku": "1002064151",
"warranty": "ANSI Certified,CSA Certified",
"images": {
  "stainless": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
  ],
  "white": [
    "Amana Electric Range in White-1.jpg",
    "Amana Electric Range in White-2.jpg",
    "Amana Electric Range in White-3.jpg",
    "Amana Electric Range in White-4.jpg"
  ],
  "black": [
    "Amana-black-1.jpg",
    "Amana-black-2.jpg",
    "Amana-black-3.jpg",
    "Amana-black-4.jpg",
    "Amana-black-5.jpg"
  ],
  "regular": [
    "Amana Electric Range in Stainless Steel-1.jpg",
    "Amana Electric Range in Stainless Steel-2.jpg",
    "Amana Electric Range in Stainless Steel-3.jpg",
    "Amana Electric Range in Stainless Steel-4.jpg",
    "Amana Electric Range in Stainless Steel-5.jpg"
  ]
},
"specifications": {
  "dimensions": [
    {
      "value": "45.25",
      "title": "Depth With Door(s) Open 90 Degrees (In.)"
    },
    {
      "value": "25",
      "title": "Oven Interior Depth (in)"
    },
    {
      "value": "18.38",
      "title": "Oven Interior Height (in)"
    },
    {
      "value": "19",
      "title": "Oven Interior Width (in)"
    },
    {
      "value": "27.2",
      "title": "Product Depth (in.)"
    },
    {
      "value": "46.25",
      "title": "Product Height (in.)"
    },
    {
      "value": "29.88",
      "title": "Product Width (in.)"
    },
    {
      "value": "30 in.",
      "title": "Range Size"
    }
  ],
  "details": [
    {
      "value": "Gas Range",
      "title": "Appliance Type"
    },
    {
      "value": "Cast Iron",
      "title": "Burner Grate Material"
    },
    {
      "value": "9500",
      "title": "Burner No.1 BTU"
    },
    {
      "value": "15000",
      "title": "Burner No.2 BTU"
    },
    {
      "value": "5000",
      "title": "Burner No.3 BTU"
    },
    {
      "value": "15000",
      "title": "Burner No.4 BTU"
    },
    {
      "value": "5.1",
      "title": "Capacity of Oven (cu. ft.)"
    },
    {
      "value": "Manual Clean",
      "title": "Cleaning Type"
    }
  ]
},

"feature": [
  "Large 4.8 cu. ft. oven capacity with space for dinner and dessert",
  "Versatile cooktop with multiple element options up to 1,800 watts",
  "Bake Assist Temp presets make cooking even more convenient"
],
"$$hashKey": "object:181"

} ]

2 个答案:

答案 0 :(得分:2)

您必须指定所需数组项的索引,在本例中为0。

$scope.product[0].images.regular[0];

答案 1 :(得分:0)

问题是你的DataService.getProduct是它的一个承诺 当承诺结束成功时,你需要解决并设定值。

尝试更改代码。

init = function () {
    $scope.product = DataService.getProduct(function(product){
         console.log('productController.product = ', product)
         $mainImage = product.images.regular[0];
         $productImages = product.images.regular;
    }, function(error){

    }); //this if is a resource with $resource.

    $scope.product = DataService.getProduct().then(function(product){
         console.log('productController.product = ', product)
         $mainImage = product.images.regular[0];
         $productImages = product.images.regular;
    }, function(error){

    }); // this if is a factory with $http

};

这是异步的常见情况。过程

更新

getProduct返回一个数组,因此您需要先访问该数组。

所以

  $scope.product = DataService.getProduct();

  $mainImage = $scope.product[0].images.regular[0];
  $productImages = $scope.product[0].images.regular;
相关问题