javascript - 更改不会通过组件传播

Question

我有以下组件示例，该组件在单击按钮时切换元素 (div)。问题是第一次单击绝对不会执行任何操作:更改根本不会传播，需要第二次单击才能实现所需的行为。

import { Component } from '@angular/core';

var exec = require('child_process').exec; //electron part

@Component({
    selector: 'my-component',
    template: `

        <button (click)="showDiv()">Toggle Div</button>
        <div *ngIf="show" style="width: 50px; height: 50px; background-color: green">
        </div>

    `
})
export class MyComponent {

    private show = false;

    public showDiv() {

        exec("wmic logicaldisk get caption", function(error, stdout, stderr){
            console.log(stdout);
            this.show = !this.show;
        }.bind(this));

    }

}

因此，当我尝试执行 Windows 命令提示符命令(即使用 Electron 包的 wmic Logicaldisk get Caption)并在命令返回其值后更新组件时，就会发生棘手的部分。
在使用 Electron 复制某些文件的情况下 (exec("copy a.txt dir", function(error, stdout, stderr){...})) 并且在操作结束后我的组件需要更新某些状态(假设:文件复制成功!)，此解决方案将不起作用。
那么这种方法可能有什么问题呢？

Answer 1

当我们改变任何 Angular 之外的东西时， Angular 不会考虑到它。尝试使用 ngZone (我不知道是否有效)

export class MyComponent {
    private show = false;
    constructor(private ngZone:NgZone) //<--ID NgZone
    public showDiv() {
        exec("wmic logicaldisk get caption", function(error, stdout, stderr){
            console.log(stdout);
            this.ngZone.run(()=>{
              this.show = !this.show;
             });
        }.bind(this));
    }
}