Angular2应用程序问题-必须执行两次功能，才能强制显示更改

Question

首先看看我的plunker：

https://plnkr.co/edit/5x76J6i0rm5mmDRDO9QP

打开控制台并尝试单击和拖动轴。当您点击并移动轴时，将执行以下功能：

plot.on('plotly_relayout', () => {
console.log('relayouted');  
this.someVar = false;
});

正如您在控制台中看到的，它记录了relayouted消息，但someVar仍然没有更改。

但是(这是一个奇怪的、出乎意料的部分)-如果你再次单击图表(你甚至不必拖动它)，someVar最终将变为false。(正如我所希望的)

我的问题是我想在函数执行后立即更改someVar值。

这很奇怪，因为当图表重新发布时，console.log会立即被记录，但变量不会发生这种情况。

为什么我要执行两次函数，以强制显示更改？

谢谢。

EDIT1：如果您尝试console.log该变量：

plot.on('plotly_relayout', () => {
console.log('relayouted');  
this.someVar = false;
console.log(this.someVar);
});

它将在第一次执行时记录false。因此，这将是一种悖论，因为变量是假的，但在视图中它显示为真！奇怪的

Answer 1

当您监听外部库事件时，必须确保在事件内部，您正在角度上下文中运行。

试试这个：

从@angular/core 导入NgZone

然后将public zone: NgZone添加到构造函数中，最后将代码替换为下一个。

let plot = document.getElementById('plotly');
plot.on('plotly_relayout', () => {
this.zone.run(() => {
console.log('relayouted');  
this.someVar = !this.someVar;  
}); 
});

以下是您的更改：https://plnkr.co/edit/Zqvxpv5tyQ0AIIK7Iapw?p=preview