El "this" del componente Angular2 no está definido al ejecutar la function de callback

Tengo un componente que llama a un service para get datos de un punto final RESTful. Este service debe tener una function de callback para ejecutar después de get dichos datos.

El problema es cuando bash usar la function de callback para agregar los datos a los datos existentes en la variable de un componente, obtengo una EXCEPTION: TypeError: Cannot read property 'messages' of undefined . ¿Por qué es this indefinido?

Versión de TypeScript: Versión 1.8.10

Código del controller:

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

Utilice la function Function.prototype.bind :

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

Lo que sucede aquí es que pasa los gotMessages como una callback, cuando se está ejecutando el scope es diferente y entonces this no es lo que esperaba.
La function de bind devuelve una nueva function que está vinculada al this usted definió.

Por supuesto, también puedes usar una function de flecha de grasa:

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

Prefiero la syntax de bind , pero depende de usted.

Una tercera opción para vincular el método para comenzar:

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

Como acaba de pasar la reference de function en getMessages , no tiene el derecho en this context.

Puede solucionarlo fácilmente utilizando una lambda que se une automáticamente a la derecha de this context para el uso dentro de esa function anónima:

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

O puedes hacerlo así

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

Por favor define la function

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