変更がコンポーネントを介して伝播しない

Question

ボタンをクリックしたときに要素（div）を切り替えるコンポーネントの次の例があります。問題は、最初のクリックが絶対に何もしないことです。変更はまったく伝播せず、目的の動作を達成するために2度目のクリックが必要です。私は電子パッケージを使用して、すなわちwmic logicaldisk get caption promptコマンドをコマンドのWindowsを実行しようとすると、コマンドはその値を返した後、コンポーネントを更新するとき

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

    } 

} 

だからトリッキーな部分が起こります。
一部のファイルが電子メール（exec("copy a.txt dir", function(error, stdout, stderr){...})）を使用してコピーされ、操作が終了した後、コンポーネントをステータスで更新する必要があります（「ファイルが正常にコピーされました！」）。
だからこのアプローチで何が間違っている可能性がありますか？

Answer 1

角をつけて何かを変更するときは、それを考慮しないでください。 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)); 
    } 
}