AngularJS：Array.prototype.find（）在Chrome不起作用 [英] AngularJS: Array.prototype.find() does not work in Chrome

问题描述

我在哪里我的角度code是在Firefox，但不是在铬工作的问题。

浏览器控制台打印这样的：

 类型错误：未定义不是一个函数
    在setSelectedColor（HTTP：//本地主机：3000 /资产/产品/控制器/ mens_detail_controller.js体= 1：24：54）
 

这是我的控制器（注意的console.log ■在那里的故障发生）：

  app.controller（'MensDetailCtrl'，['$范围，$资源'，'$控制'，'产品'，函数（$范围，$资源，$控制器，产品）{
  $控制器（'ProductsDetailCtrl'，{$范围：$范围}）;  $ scope.init =功能（ID，区域设置，selected_color_id）
  {
    $ scope.product = Product.get（{产品编号：ID，区域设置：区域设置}，功能（数据）{
      VAR unsorted_products_colors = data.products_colors.filter（功能（product_color）{
        返回product_color.mens ==真;
      }）;      $ scope.products_colors = unsorted_products_colors.sort（功能（A，B）{
        返回a.mens_sort_order＆GT; b.mens_sort_order;
      }）;      setSelectedColor（selected_color_id）;
    }）;  }  VAR setSelectedColor =功能（selected_color_id）{
    的console.log（FFFF）; //输出
    如果（selected_color_id）{
      的console.log（eeeffff）; //输出
      //错误似乎在这下一行，这是24行发生：
      $ scope.selected_color = $ scope.products_colors.find（功能（EL）{
        返回el.id == selected_color_id;
      }）;
    }其他{
      的console.log（hhffff）;
      $ scope.selected_color = $ scope.products_colors [0];
    }
    的console.log（ffffzzz）; //不打印    $ scope.selected_variant = $ scope.selected_color.variants [0];
    $ scope.sorted_product_images = $ scope.selected_color.product_images.sort（功能（A，B）{
      返回a.sort_order＆GT; b.sort_order;
    }）;
    $ scope.selected_image = $ scope.sorted_product_images [0];
  }
}]）;
 

为什么它的工作在Firefox而不是Chrome上完全没问题？我将如何解决这个问题？

== ==更新
甚至当我打印出来的值 $ scope.products_colors 右键在飞机坠毁前，它打印出的对象在我的浏览器控制台：

  FFFF
eeeffff
[对象] 0：对象$$ hashKey：004的色彩：Objectcolor_id：32created_at：2014-08-12T19：47：32.000ZID：91mens：truemens_sort_order：0product_id：15product_images：数组[2]的updated_at：2014- 08-12T19：47：32.000Z变种：数组[1]女子：truewomens_sort_order：0__proto__：Objectlength：1__proto__：数组[0]
 

==更新2 ==

删除 .find（...）和数组下标替换它修复了错误，但它不是固定的错误，因为我需要抓住一个元素某些属性：

  VAR setSelectedColor =功能（selected_color_id）{
    如果（selected_color_id）{
      // $ scope.selected_color = $ scope.products_colors.find（功能（EL）{
      //返回el.id == selected_color_id;
      //}）;
      $ scope.selected_color = $ scope.products_colors [0]
    }其他{
      $ scope.selected_color = $ scope.products_colors [0];
    }    $ scope.selected_variant = $ scope.selected_color.variants [0];
    $ scope.sorted_product_images = $ scope.selected_color.product_images.sort（功能（A，B）{
      返回a.sort_order＆GT; b.sort_order;
    }）;
    $ scope.selected_image = $ scope.sorted_product_images [0];
  }
 

解决方案

我固定它通过替换 .find .filter（... ）[0]

I'm having an issue where my angular code is working in firefox but not in chrome.

The browser console prints this:

TypeError: undefined is not a function
    at setSelectedColor (http://localhost:3000/assets/products/controllers/mens_detail_controller.js?body=1:24:54)

This is my controller (notice the console.logs at where the failure is happening):

app.controller('MensDetailCtrl', ['$scope', '$resource', '$controller', 'Product', function($scope, $resource, $controller, Product) {
  $controller('ProductsDetailCtrl', {$scope: $scope});

  $scope.init = function(id, locale, selected_color_id)
  {
    $scope.product = Product.get({productId: id, locale: locale}, function(data) {
      var unsorted_products_colors = data.products_colors.filter(function(product_color) {
        return product_color.mens == true;
      });

      $scope.products_colors = unsorted_products_colors.sort(function(a, b) {
        return a.mens_sort_order > b.mens_sort_order;
      });

      setSelectedColor(selected_color_id);
    });

  }

  var setSelectedColor = function(selected_color_id) {
    console.log("ffff"); //prints
    if (selected_color_id) {
      console.log("eeeffff"); //prints
      // the error seems to happen at this next line, which is line 24:
      $scope.selected_color = $scope.products_colors.find(function(el) {
        return el.id == selected_color_id;
      });
    } else {
      console.log("hhffff");
      $scope.selected_color = $scope.products_colors[0];
    }
    console.log("ffffzzz"); // does NOT print

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }


}]);

Why does it work completely fine on Firefox but not on Chrome? How would I fix this?

== UPDATE == Even when I print out the value of $scope.products_colors right before the crash, it prints out an object in my browser console:

ffff
eeeffff 
[Object]0: Object$$hashKey: "004"color: Objectcolor_id: 32created_at: "2014-08-12T19:47:32.000Z"id: 91mens: truemens_sort_order: 0product_id: 15product_images: Array[2]updated_at: "2014-08-12T19:47:32.000Z"variants: Array[1]womens: truewomens_sort_order: 0__proto__: Objectlength: 1__proto__: Array[0]

== UPDATE 2 ==

Removing the .find(...) and replacing it with the array subscript fixes the error, but it's not fixing the bug because I need to grab elements with a certain attribute:

  var setSelectedColor = function(selected_color_id) {
    if (selected_color_id) {
      // $scope.selected_color = $scope.products_colors.find(function(el) {
      //         return el.id == selected_color_id;
      //       });
      $scope.selected_color = $scope.products_colors[0]
    } else {
      $scope.selected_color = $scope.products_colors[0];
    }

    $scope.selected_variant = $scope.selected_color.variants[0];
    $scope.sorted_product_images = $scope.selected_color.product_images.sort(function(a, b) {
      return a.sort_order > b.sort_order;
    });
    $scope.selected_image = $scope.sorted_product_images[0];
  }

解决方案

I fixed it by replacing .find with .filter(...)[0]

这篇关于AngularJS：Array.prototype.find（）在Chrome不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！