typescript - 在 angular 中访问该对象时获取 undefined

我有两个对象 OldAnswer 和 NewAnswer。我正在尝试将 OldAnswer 对象数组转换为 NewAnswer 对象数组。

export class AnswerComponent implements OnInit {


answers: OldAnswer[] = [/* some data  */];

newanswers: NewAnswer[];

constructor() {


    this.answers.forEach(function (answer) {

        answer.answers.forEach(function (a){

            for (var key in a) {
                text = // some logic"";     
            }
            // exception in below line
        this.newanswers.push({id: answer.observationId,answer: text});
        });
    });

    }

}

但是我收到“无法在未定义上调用 newanswers”。为什么这里的 this 对象是 undefined，而在访问 answers 时却不是？

答案＃1

你声明了数组但没有初始化。修复：

newanswers: NewAnswer[] = [];

此外，你需要使用箭头函数，这样你的作用域就不会改变

this.answers.forEach(answer => { 
  answer.answers.forEach( (a) => { 
    for (var key in a) { 
      text = // some logic""; 
    } // exception in below line 

    this.newanswers.push({id: answer.observationId,answer: text}); 
}); }); }

答案＃2

问题原因：

你使用了 forEach 和 function()

解决方案：

在 forEach 中使用箭头函数来定义你的函数：

this.answers.forEach((answer) => {

    answer.answers.forEach((a) => {

为什么箭头函数可以解决这个问题：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

直到箭头函数出现之前，每个新定义的函数都会定义自己的 this 值（基于函数的调用方式，在构造函数的情况下为一个新对象，严格模式函数调用中为 undefined，如果函数作为“对象方法”调用则为基础对象，等等）。这种方式在面向对象的编程风格中被证明并不理想。

（强调为我所加）.

由于 Angular/TypeScript 会生成严格模式的 JavaScript，this 在 function() {} 的函数体内将是 undefined，它将不再引用你类的对象实例。

注意：还有其他“老派的 JavaScript 方法”可以解决这个问题，但箭头函数现在确实是在 TypeScript/Angular/ES6 中在大多数类似情况下通常使用的方法。

在对数组调用 push() 之前，也要先初始化它

然而，你也会遇到 newanswers 未定义的问题（至少在你提供的示例中是这样，所以正如 Simonare 所指出的，你也应该将它初始化为空数组 []）。