angular 4 function undefined when nested in http request [duplicate]

问题

I am new to angular and trying to learn quickly but I am stumped as to what is happening. When my TS file is loaded, it gets a list of messages from a http.get request and stores them int he variable conversation. However, when I add a new message, it is making it to my API and returning a result, but when I try to add the message to the conversation, I get the error

this.insertMessage is undefined

But the function is set. See code below. I assume that when you are trying to call a function within the complete function in the .subscribe method, you cannot access external functions. Is that correct?

export class MessagePage {

  newmessage;
  conversation;

  id;
  response: {};

  ionViewWillEnter(){
    this.getMessage(this.id);
  }

  // public messageArr;
  constructor(public navCtrl: NavController, public navParams: NavParams, public messageService: MessagesProvider) {
    this.id = navParams.get('id');
  }

  addmessage(): void {
    this.messageService.addMessage(this.newmessage,this.id)
      .subscribe( 
        function(response) { console.log("Success Response" + response); this.response = response;},
        function(error) { console.log("Error happened" + error)},
        function() {     
          if(this.response.result == 200) this.insertMessage(this.response.response.message);
          else console.error(this.response);
        }
      );
  }

  getMessage(id: number): void {
    this.messageService.getMessage(id)
      .subscribe(message => this.conversation = message);
  }

  insertMessage(message): void {
    console.log('conversation:'+ this.conversation);
    this.conversation.push(message);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MessagePage');
  }

}

回答1:

Use the more modern arrow functions(() => {}) syntax instead of the old normal functions syntax(function () {}) to retain the scope of this.

Since the scope of this changed in your callback function, this was not referring to your MessagePage anymore.

Using the arrow functions(() => {}) syntax will retain the scope of this.

Use this for the fix:

addmessage(): void {
  this.messageService.addMessage(this.newmessage, this.id)
    .subscribe(
      response => this.response = response,
      error => console.log("Error happened" + error),
      () => {
        if (this.response.result == 200) 
          this.insertMessage(this.response.response.message);
        else console.error(this.response);
      }
    );
}

回答2:

You can simply access the the outer scope of this like below

  addmessage(): void {
     var self=this;

    this.messageService.addMessage(this.newmessage,this.id)
      .subscribe( 
        function(response) { console.log("Success Response" + response); this.response = response;},
        function(error) { console.log("Error happened" + error)},
        function() {     
          if(this.response.result == 200) self.insertMessage(this.response.response.message);
          else console.error(this.response);
        }
      );
  }

来源：https://stackoverflow.com/questions/52783106/angular-4-function-undefined-when-nested-in-http-request

标签

angular

ionic-framework

ionic3