La suppression d'objets du tableau transmis en tant que paramètre ne modifie pas le tableau d'origine (angulaire)

Question

Salut les gars Je suis nouveau sur Angular, alors soyez facile. J'ai remarqué que lorsque j'essayais de supprimer un objet d'un tableau passé dans une fonction, cela supprimait l'objet du tableau dans la fonction, mais pas dans le tableau d'origine. Cela m'a dérouté parce que je pensais qu'ils étaient adoptés par référence:

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']); }
    }
}

Le problème est que si je passe une entrée avec un ID de 1 dans manageEntry et que je définis des points d'arrêt dans removeFromMeal, je peux voir que le tableau 'repas' est filtré avec succès (c'est-à-dire que l'objet avec l'ID 1 est supprimé de vm.breakfast). Cependant, dès que cette fonction revient, elle (vm.breakfast) est exactement la même que si la fonction ne s'exécutait jamais. Je suis sûr que le problème concerne le contexte / la portée, l'utilisation de $ apply serait-elle appropriée ici quelque part?

Merci d'avance.

javascript angularjs

0

John Doe 7 mars 2016 à 20:38

Answer 1

meal.filter() renvoie un nouveau tableau, il ne modifie pas le tableau d'origine. Et l'affectation à la variable meal ne fait que modifier la variable locale, elle ne modifie pas la variable ou l'objet qui a été utilisé lors de l'appel de la fonction. Les fonctions Javascript sont appelées par valeur, où la valeur peut être une référence à un tableau ou à un objet, mais ce n'est pas une référence à l'emplacement d'où provient l'objet. Vous devez écrire:

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

1

Barmar 7 mars 2016 à 17:43

Answer 2

Vous pouvez travailler sur la copie.

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

J'espère que cela vous aidera

0

robBerto 7 mars 2016 à 17:49

Answer 3

Pensez à utiliser à la place splice. Cela supprimera la valeur du tableau existant.

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']);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as vm">
    <ul>
      <li ng-repeat="entry in vm.breakfast">
        {{entry.name}}
        <button ng-click="vm.manageEntry(entry)">Manage {{entry.name}}</button>
      </li>
    </ul>

  </div>
</div>

0

TwitchBronBron 7 mars 2016 à 18:16

La suppression d'objets du tableau transmis en tant que paramètre ne modifie pas le tableau d'origine (angulaire)

3 réponses

Questions connexes

De nouvelles questions

javascript