O "this" do componente Angular2 é indefinido ao executar a função de retorno de chamada

Eu tenho um componente que chama um serviço para buscar dados de um ponto de extremidade RESTful. Este serviço precisa receber uma função de retorno de chamada para ser executado após a busca dos dados.

O problema é que, quando tento usar a função de retorno de chamada para acrescentar os dados aos dados existentes na variável de um componente, obtenho um EXCEPTION: TypeError: Cannot read property 'messages' of undefined. Por que está thisindefinido?

Versão TypeScript: Versão 1.8.10

Código do controlador:

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

Use a função Function.prototype.bind :

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

O que acontece aqui é que você passa o gotMessagescomo callback, quando está sendo executado o escopo é diferente e então thisnão é o que você esperava.
A bindfunção retorna uma nova função que está vinculada ao que thisvocê definiu.

Você pode, é claro, usar uma função de seta lá também:

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

Eu prefiro a bindsintaxe, mas é com você.

Uma terceira opção para ligar o método para começar:

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

Ou

export class MainComponent {
    ...

    constructor(private apiService: ApiService) {
        this.getMessages = this.getMessages.bind(this);
    }

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

Ou você pode fazer assim

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

Porque você está apenas passando a referência de função, getMessagesvocê não tem o thiscontexto certo .

Você pode corrigir isso facilmente usando um lambda que vincula automaticamente o thiscontexto certo para o uso dentro dessa função anônima:

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

Eu tenho o mesmo problema, resolvido usando () => {} em vez da função ()

Defina a função

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