콜백 함수를 실행할 때 Angular2 구성 요소의 "this"가 정의되지 않았습니다.

콜백 함수를 실행할 때 Angular2 구성 요소의 "this"가 정의되지 않았습니다.

RESTful 끝점에서 데이터를 가져오는 서비스를 호출하는 구성 요소가 있습니다.해당 데이터를 가져온 후 실행하려면 이 서비스에 콜백 기능이 있어야 합니다.

문제는 콜백 함수를 사용하여 구성 요소의 변수에 있는 기존 데이터에 데이터를 추가하려고 하면 다음과 같은 메시지가 표시된다는 것입니다.EXCEPTION: TypeError: Cannot read property 'messages' of undefined이유는this미정의?

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

Function.prototype을 사용합니다.바인딩 함수:

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

여기서 일어나는 일은 당신이 통과하는 것입니다.gotMessages콜백으로서, 그것이 실행되고 있을 때, 범위가 다르므로.this당신이 예상했던 것과 다릅니다.
그bindfunction은 다음에 바인딩된 새 함수를 반환합니다.this정의했습니다.

물론 화살표 기능도 사용할 수 있습니다.

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

나는 그것을 선호합니다.bind문법은 당신에게 달렸어요

세 번째 옵션은 다음으로 시작할 메서드를 바인딩하는 것입니다.

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

또는

export class MainComponent {
    ...

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

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

아니면 이렇게 할 수도 있습니다.

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

왜냐하면 당신은 단지 함수 참조를 전달하고 있기 때문에getMessages줄 권리는 없어요.this맥락.

오른쪽을 자동으로 바인딩하는 람다를 사용하여 쉽게 수정할 수 있습니다.this해당 익명 함수 내에서 사용할 컨텍스트:

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

함수 대신 () => {}을(를) 사용하여 해결한 동일한 문제가 있습니다.

함수를 정의하십시오.

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

언급URL : https://stackoverflow.com/questions/38245450/angular2-components-this-is-undefined-when-executing-callback-function