Geri arama işlevi çalıştırılırken Angular2 bileşeninin "bu" tanımsız

RESTful bir uç noktadan veri almak için bir hizmeti çağıran bir bileşenim var. Bu hizmete, söz konusu veriler getirildikten sonra çalıştırılması için bir geri arama işlevi verilmesi gerekir.

Buradaki sorun, verileri bir bileşenin değişkenindeki mevcut verilere eklemek için geri arama işlevini kullanmayı denediğimde, bir EXCEPTION: TypeError: Cannot read property 'messages' of undefined. Neden thistanımsız?

TypeScript sürümü: Sürüm 1.8.10

Denetleyici kodu:

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

Function.prototype.bind işlevini kullanın :

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

Burada olan şey, gotMessagesgeri arama olarak iletmenizdir, bu yürütülürken kapsam farklıdır ve bu nedenle thisbeklediğiniz gibi değildir. Fonksiyon bağlı yeni bir fonksiyon verir tanımladığınız.
bindthis

Elbette orada bir ok işlevi de kullanabilirsiniz:

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

bindSözdizimini tercih ederim ama bu size kalmış.

Başlamak için yöntemi bağlamak için üçüncü bir seçenek:

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

Veya

export class MainComponent {
    ...

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

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

Ya da böyle yapabilirsin

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

Çünkü fonksiyon referansını iletiyorsunuz, getMessagesçünkü doğru thisbağlama sahip değilsiniz .

Bu thisanonim işlevin içinde kullanım için doğru bağlamı otomatik olarak bağlayan bir lambda kullanarak bunu kolayca düzeltebilirsiniz :

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

Aynı sorunu yaşıyorum, bunun yerine function () kullanarak () => {} çözdüm

Lütfen işlevi tanımlayın

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