Javascript 角度2组件'；s"；这"；在执行回调函数时未定义

我有一个组件，它调用服务从RESTful端点获取数据。需要为该服务提供一个回调函数，以便在获取所述数据后执行

问题是，当我尝试使用回调函数将数据附加到组件变量中的现有数据时，我得到了一个

异常：TypeError:无法读取未定义的
的属性“messages”。为什么
这个
没有定义

TypeScript版本：1.8.10版

控制器代码：

import {Component} from '@angular/core'
import {ApiService} from '...'

@Component({
    ...
})
export class MainComponent {

    private messages: Array<any>;

    constructor(private apiService: ApiService){}

    getMessages(){
        this.apiService.getMessages(gotMessages);
    }

    gotMessages(messagesFromApi){
        messagesFromApi.forEach((m) => {
            this.messages.push(m) // EXCEPTION: TypeError: Cannot read property 'messages' of undefined
        })
    }
}

从'@angular/core'导入{Component}
从“…”导入{ApiService}
@组成部分({
...
})
导出类主组件{
私有消息：数组；
构造函数（私有apiService:apiService）{}
getMessages（）{
this.apiService.getMessages（gotMessages）；
}
gotMessages（messagesFromApi）{
messagesFromApi.forEach（（m）=>{
this.messages.push（m）//异常：TypeError:无法读取未定义的属性“messages”
})
}
}
使用以下功能：

getMessages() {
    this.apiService.getMessages(this.gotMessages.bind(this));
}

getMessages(){
    this.apiService.getMessages((data) => this.gotMessages(data));
}

这里发生的情况是，您将
gotMessages
作为回调传递，当执行回调时，作用域不同，因此
此
不是您所期望的。

bind
函数返回一个绑定到您定义的
此
的新函数

当然，您也可以在那里使用：

getMessages() {
    this.apiService.getMessages(messages => this.gotMessages(messages));
}

我更喜欢
bind
语法，但这取决于您

第三个选项用于绑定要开始的方法：

export class MainComponent {
    getMessages = () => {
        ...
    }
}

或

因为您只是在
getMessages
中传递函数引用，所以您没有正确的
此
上下文

您可以通过使用lambda轻松解决此问题，lambda自动绑定右侧
此
上下文，以便在匿名函数中使用：

getMessages() {
    this.apiService.getMessages(this.gotMessages.bind(this));
}

getMessages(){
    this.apiService.getMessages((data) => this.gotMessages(data));
}

请定义函数

gotMessages = (messagesFromApi) => {
  messagesFromApi.forEach((m) => {
    this.messages.push(m)
  })
}

或者你可以这样做

gotMessages(messagesFromApi){
    let that = this // somebody uses self 
    messagesFromApi.forEach((m) => {
        that.messages.push(m) // or self.messages.push(m) - if you used self
    })
}

我也有同样的问题，通过使用（）=>{}而不是函数（）
您使用的是哪个版本的TypeScript来解决？（您可以使用
tsc-v
）检查该异常，因为forEach。用For代替。就是这样！谢谢你。最简单有效的解决方案。有效，谢谢！谢谢你解释为什么会这样。谢谢！OOP风格泄露javascript细节（绑定）的事实是悲惨的。这不会向现有应答添加任何信息这不会向现有应答添加任何信息您是我的英雄