Angular 中的问题“Uncaught (in promise) TypeError”

Question

我正在尝试在 Angular 中实现基于 RiveScript 的聊天机器人。聊天机器人工作得很好——我总是在控制台中得到正确的答案。显示用户的输入也很有效。但是，我总是卡在一点：由于以下错误，在聊天 UI 中显示聊天机器人的答案：

ERROR Error: Uncaught (in promise): TypeError: this is undefined

我真的尝试了很多东西，但我找不到问题所在。从我的角度来看，这也有点令人困惑，因为我可以在控制台中获得正确的聊天机器人消息。如果有人能帮我解决这个问题，我会很高兴！

这是我的源代码，所以你可以看到代码有效。

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //gettng user message

    this.update(userMessage); 

   

    var bot = new RiveScript({utf8: true}); // initializing bot

     

    bot.loadFile('/assets/brain/test.rive').then(loading_done); // loading bot brain

    function loading_done() {

      console.log("Chatbot initialized!"); 

      bot.sortReplies();  //sorting replies 

    

      let username = "user";

      

      return bot.reply(username, msg).then(answer => { //getting chatbot answer

        console.log("User: " + msg);

        console.log("Chatbot: " + answer);

        const result = answer; 

        const botMessage = new Message(result, 'bot');  

        this.update(botMessage);

      }); 

    }

  }

Answer 1

尝试converse(msg: string) {    const userMessage = new Message(msg, 'user'); //gettng user message    this.update(userMessage);        var bot = new RiveScript({utf8: true}); // initializing bot         const loading_done = (bot) => ()=> {      console.log("Chatbot initialized!");       bot.sortReplies();  //sorting replies           let username = "user";            return bot.reply(username, msg).then(answer => { //getting chatbot answer        console.log("User: " + msg);        console.log("Chatbot: " + answer);        const result = answer;         const botMessage = new Message(result, 'bot');          this.update(botMessage);      });     }   bot.loadFile('/assets/brain/test.rive').then(loading_done(bot)); // loading bot brain  }或者   loading_done(bot){ return  ()=> {const that = this;      console.log("Chatbot initialized!");       bot.sortReplies();  //sorting replies           let username = "user";            return bot.reply(username, msg).then(answer => { //getting chatbot answer        console.log("User: " + msg);        console.log("Chatbot: " + answer);        const result = answer;         const botMessage = new Message(result, 'bot');          that.update(botMessage);      });     } }converse(msg: string) {    const userMessage = new Message(msg, 'user'); //gettng user message    this.update(userMessage);        var bot = new RiveScript({utf8: true}); // initializing bot       bot.loadFile('/assets/brain/test.rive').then(this.loading_done(bot).bind(this)); // loading bot brain  }但我相信第一个解决方案更清楚

Answer 2

this使用箭头函数代替定义自己的上下文的函数：const loading_done = () => {      console.log("Chatbot initialized!");       bot.sortReplies();  //sorting replies           let username = "user";            return bot.reply(username, msg).then(answer => { //getting chatbot answer        console.log("User: " + msg);        console.log("Chatbot: " + answer);        const result = answer;         const botMessage = new Message(result, 'bot');          this.update(botMessage);      });     }当您使用打字稿时，您还可以将 loading_done 设为私有函数：converse(msg: string) {    const userMessage = new Message(msg, 'user'); //gettng user message    this.update(userMessage);        var bot = new RiveScript({utf8: true}); // initializing bot         bot.loadFile('/assets/brain/test.rive').then(this.loadingDone); // loading bot brai  }// Use camel case instead of snake case in typescript.private loadingDone = () => {      console.log("Chatbot initialized!");       bot.sortReplies();  //sorting replies           let username = "user";            return bot.reply(username, msg).then(answer => { //getting chatbot answer        console.log("User: " + msg);        console.log("Chatbot: " + answer);        const result = answer;         const botMessage = new Message(result, 'bot');          this.update(botMessage);      }); }