Angular5 绑定不适用于对象 [隐藏] 中的函数调用

Angular5 Bindings not working with function call in object [hidden]

我目前将我的一个 div 的隐藏属性绑定到我打字稿中的一个布尔值。但是,当我在嵌套在一个对象中的函数调用之一中更改布尔值时,dom 没有在前端更新?

打字稿

hideSymbols = true;

bindings = {
    enter: {
      key: 13,
      handler: function() {
        console.log('enter pressed');
        this.hideSymbols = !this.hideSymbols;
        console.log(this.hideSymbols);
      }
    }
  };

html

<div [hidden]="hideSymbols">
   <button id="equalsBtn" class="symbolBtn">=</button>
   <button id="impliesBtn" class="symbolBtn">=></button>
</div>

如果我没有在此处理程序中进行调用,但我需要这样做,以便我的 ngx-quill 实例更新回车键的工作方式。本质上,为什么 hideSymbols 正在更新,但在我的网络视图中该元素不会消失并重新出现?

做到这一点:

handler: () => {...

...而不是使用 function。使用 function 定义的函数有自己的 this.

如果没有更多上下文,我不确定这是否是整个问题,但这可能至少是问题的一部分。

this.hideSymbols = !this.hideSymbols; 在错误的范围内执行。

这是你拥有的:

var result1 = null;
var exhibitA = {
 execute: function(){
  this.result1 = "hello";
 }
};
exhibitA.execute();

console.log({ exhibitA, result1 });

这就是你想要的:

var result2 = null;
var exhibitB = {
  execute: () => {
    this.result2 = "hello";
  }
};
exhibitB .execute();

console.log({ exhibitB, result2 });