Le composant "this" du composant Angular2 n'est pas défini lors de l'exécution de la fonction de rappel

Question

J'ai un composant qui appelle un service pour extraire des données d'un noeud final RESTful. Ce service doit recevoir une fonction de rappel à exécuter après la récupération desdites données.

Le problème est que lorsque j'essaie d'utiliser la fonction de rappel pour ajouter les données aux données existantes dans la variable d'un composant, j'obtiens un EXCEPTION: TypeError: Cannot read property 'messages' of undefined . Pourquoi this indéfini?

Version TypeScript: Version 1.8.10

Code du contrôleur:

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

Answer 1

Utilisation de la Fonction.le prototype.lier la fonction:

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

Ce qui se passe ici est que vous passez l' gotMessages rappel, lorsque que l'exécution de la portée est différente, et l' this n'est pas ce que vous attendiez.
L' bind fonction renvoie une nouvelle fonction qui est lié à l' this que vous avez défini.

Vous pouvez, bien sûr, utiliser une flèche de la fonction y ainsi:

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

Je préfère l' bind de la syntaxe, mais c'est à vous.

Une troisième option, afin de lier la méthode pour commencer:

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

Ou

export class MainComponent {
    ...

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

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

Answer 2

Ou tu peux le faire comme ça

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

Answer 3

Parce que vous ne faites que passer la référence de la fonction dans getMessages vous n'avez pas le bon contexte this .

Vous pouvez facilement résoudre ce problème en utilisant un lambda qui lie automatiquement le bon contexte this pour l'utilisation à l'intérieur de cette fonction anonyme:

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

Answer 4

S'il vous plaît définir la fonction

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