Javascript “问题”；未捕获（承诺中）类型错误“；有角度的RiveScript聊天机器人

我正在尝试在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);
      }); 
    }
  }

---

使用箭头函数，而不是定义自己的

此

上下文的函数：

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

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

在使用typescript时，还可以将加载_作为一个私有函数：

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

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

试一试

或

---

但是我相信第一个解决方案更清楚

bot

没有在

loadingDone

函数范围中定义。我编辑了第二个代码片段，有一个小错误。关于bot对象：我建议将其封装到角度服务中。干杯，你的第二个解决方案成功了。非常感谢你！