Question

大家好我是Angular的新手，所以请轻松一点。我注意到当我尝试从传递给函数的数组中删除对象时，它会从函数中的数组中删除对象，但不会删除原始数组中的对象。它让我困惑，因为我认为它们是通过引用传递的：

function controller($scope, $http) {
    var vm = this;
    vm.breakfast = [ { id:1, 'name':'fruit' }, { id:2, 'name':'egg' } ];

    function removeFromMeal(meal, entryId) {
        meal = meal.filter (function (entry) {
           return entry['id'] !== entryId;
        }
    }

    function manageEntry(entry) {
        ...
       // Condition to remove meal from vm.breakfast
       if (...) { removeFromMeal(vm.breakfast, entry['id']); }
    }
}

问题是，如果我将id为1的条目传递给manageEntry并在removeFromMeal内设置断点，我可以看到'meal'数组已被成功过滤（即对象为id 1从vm.breakfast中删除）。但是，只要该函数返回，它（vm.breakfast）与函数永远不会运行完全相同。我确定问题在于上下文/范围，在某处使用$ apply是否适合？

提前致谢。

Answer 1

meal.filter()返回一个新数组，它不会修改原始数组。并且分配给meal变量只是修改局部变量，它不会修改调用函数时使用的变量或对象。 Javascript函数按值调用，其中值可以是对数组或对象的引用，但它不是对对象来自的位置的引用。你需要写：

if (...) { vm.breakfast = removeFromMeal(vm.breakfast, entry['id']); }

Answer 2

您可以处理复制。

function manageEntry(entry) {
    ...
   // Condition to remove meal from vm.breakfast
   if (...) { removeFromMeal(angular.copy(vm.breakfast), entry['id']); }
}

我希望能帮到你

Answer 3

请考虑使用splice。这将从现有数组中删除该值。

null

angular.module('app', []).controller('MyController', function($scope) {
  var vm = this;
  vm.manageEntry = manageEntry;
  vm.breakfast = [{
    id: 1,
    'name': 'fruit'
  }, {
    id: 2,
    'name': 'egg'
  }];

  function removeFromMeal(meal, entryId) {
    for (var i = 0; i < meal.length; i++) {
      var entry = meal[i];
      if (entry['id'] === entryId) {
        //Using splice, remove the item at index i from the meal
        meal.splice(i, 1);
        return;
      }
    }
  }

  function manageEntry(entry) {
    // Condition to remove meal from vm.breakfast
    if (true) {
      removeFromMeal(vm.breakfast, entry['id']);
    }
  }
});

从作为参数传入的数组中删除对象不会修改原始数组（Angular）

3 个答案: