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

Question

我目前将我的一个 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 正在更新，但在我的网络视图中该元素不会消失并重新出现？

Answer 1

做到这一点：

handler: () => {...

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

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

Answer 2

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

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

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

html

angular

typescript

quill