web-dev-qa-db-fra.com

Angular2 pour chaque propriété ne peut pas lire

Comment puis-je appeler this.firms Dans une donnée forEach()?

Je sais comment faire cela dans Angular1, mais pas avec mon projet actuel dans Angular 2.

Actuellement, cela fonctionne bien en dehors de la forEach, mais pas à l'intérieur.

 console.log(this.firms[0].name); // works
    var a = 0;
        console.log("--------------");

    data.forEach(function (eachObj) {
      console.log("firms check!");
      console.log(this.firms); // not working
      a = a + eachObj.income; 
      eachObj.name = this.firms[data.firmid - 1].name; // wont work
    });

Erreur:

Cannot read property 'firms' of undefined
javascriptangularangular2-directives
14
maria

Le contexte this n'est pas injecté dans la fonction anonyme appelée par la fonction forEach(). C'est pourquoi this n'est pas défini.

Vous pouvez soit utiliser le arrow function Si vous utilisez les fonctionnalités de ES6, car il conserve le contexte dans la fonction:

data.forEach(eachObj => {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
});

Ou simplement lier directement le contexte:

data.forEach(function (eachObj) {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
}.bind(this));

Modifier :

Comme mentionné par zeroflagL , vous pouvez simplement passer le contexte à la fonction forEach():

data.forEach(function (eachObj) {
  console.log("firms check!");
  console.log(this.firms);
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name;
}, this);
32
Erazihel

Vous pouvez essayer de transformer le data en un tableau

ainsi :

Array.from(data).forEach((eachObj) => {
    console.log("firms check!"); 
    console.log(that.firms);
    eachObj.name = that.firms[data.firmid - 1].name;
})

Cela fonctionnera aussi bien

3
Acika00mk

C'est l'exemple de base pour la portée en javascript. Dans votre fonction, this fait référence au contexte de la fonction elle-même. Le monde extérieur n'est pas accessible.

Puisque vous utilisez TypeScript avec angular, vous pouvez simplement utiliser un arrow function:

data.forEach((eachObj) => {
  console.log("firms check!");
  console.log(this.firms); // not working
  a = a + eachObj.income; 
  eachObj.name = this.firms[data.firmid - 1].name; // wont work
});

Cela préservera la portée et votre this sera disponible à l'intérieur. En clair, vous pouvez faire quelque chose comme ceci:

var that = this;

data.forEach(function (eachObj) {
  console.log("firms check!");
  console.log(that.firms); // not working
  a = a + eachObj.income; 
  eachObj.name = that.firms[data.firmid - 1].name; // wont work
});
1
lexith