ACE 编辑器“无法读取未定义的属性‘getValue’”

Question

我目前正在 Angular 中构建一个降价编辑器。

• ACE editor 用作代码编辑器。
• npm 包是https://www.npmjs.com/package/ace-builds

可以在此处找到代码框：https://codesandbox.io/embed/angular-91d27

---

问题是我正在尝试获取当前值以便进一步使用它。 这个概念是，只要代码发生变化 (onChange())，内容就会被放入 Angular 服务中。

出于测试目的，我想打印 onChange 的当前内容。

this.codeEditor.on("change", function(e) {
    const code = this.codeEditor.getValue();
    console.log(code);
});

现在每当我输入某些内容时，我都会收到以下错误：

ERROR TypeError: Cannot read property 'getValue' of undefined

如果有人在此之前遇到过这种情况，我会很高兴得到一些帮助。
另外我想知道这是否是处理此问题的“正确方法”，或者是否有更好的选择。

Answer 1

每个新函数都定义了自己的this 范围。尝试改用arrow functions。箭头函数在词法上绑定它们的上下文，所以 this 实际上是指原始上下文。

this.codeEditor.on("change", (e) => {
    const code = this.codeEditor.getValue();
    console.log(code);
});