web-dev-qa-db-ja.com

Angular2 forEachはプロパティを読み取ることができません

データforEach()内でthis.firmsを呼び出すにはどうすればよいですか？

私はAngular1でこれを行う方法を知っていますが、Angular 2。

現在、forEachの外部では正常に動作しますが、内部では動作しません。

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

エラー：

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

コンテキストthisは、forEach()によって呼び出される匿名関数には挿入されません。 thisが未定義である理由です。

ES6の機能を使用している場合は、_arrow function_を使用できます。関数内でコンテキストを保持するためです。

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

または、単にコンテキストを直接バインドします。

_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));
_

編集：

zeroflagL で述べたように、単に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

dataを配列にしようとすることができます

そのようです ：

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

これも同様に機能します

3
Acika00mk

これがjavascriptのスコープの基本的な例です。関数内でthisは関数自体のコンテキストを参照します。外の世界にはアクセスできません。

angularでTypeScriptを使用しているため、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
});

これによりスコープが保持され、thisがスコープ内で使用可能になります。プレーンjavascriptでは、次のようなことができます。

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