Angler 2（TypeScript）で* ngIfの問題

Question

Angular 2 beta（TypeScript）を使用しています。私は奇妙な問題に会った。私は、Chrome、Firefox、Opera、すべて同じ結果を試しました。

「Toggle」ボタンをクリックすると、「Hello World！」というテキストを表示/非表示にすることができます。

ソケットを使用して別のブラウザからコマンドを送信すると、ブール値 "show"は正常にバックグラウンドに変更されますが、ページが更新されないようなテキストは表示/非表示になりません。

import {Component, View} from 'angular2/core'; 
import {bootstrap} from 'angular2/bootstrap'; 
import {NgIf} from 'angular2/common'; 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    directives: [NgIf], 
    template: ` 
     <button (click)="clicked()">Toggle</button> 
     <div> 
     <div *ngIf="show"> 
      <h2>Hello World!</h2> 
     </div> 
     </div> 
    ` 
}) 
class App { 
    show: boolean = true; 

    constructor() { 
     Socket.on { 
      If (getMessage) { 
       this.show = !this.show; 
      } 
     } 
    } 

    clicked() { 
     this.show = !this.show; 
    } 
} 

bootstrap(App); 

Answer 1

Zoneに関連する問題だと思います。後者はAngularに更新を処理する必要があることを通知する責任があります。

この質問は、あなたにいくつかのヒントを与えるかもしれません：View is not updated on change in Angular2。

export class App { 
    constructor(ngZone:NgZone) { 
    this.ngZone = ngZone; 
    Socket.on { 
     this.ngZone.run(() => 
     If (getMessage) { 
      this.show = !this.show; 
     } 
     }); 
    } 
    } 

    } 

この質問は、あなたの問題に関連することができます：Angular2 child property change not firing update on bound property

は、あなたはそのような何かを試みることができます。

はティエリー

Answer 2

がSocketコードがAngularsゾーンの外で実行思え 、それはあなたのお役に立てば幸いです。 NgZoneを注入し、zone.run(...)をAngularにするとAngularは必要な変更検出を認識します。

class App { 
    show: boolean = true; 

    constructor(zone: NgZone) { 
    Socket.on { 
     if (getMessage) { 
      zone.run(() => { this.show = !this.show; }); 
     } 
    } 
    } 


    clicked() { 
    this.show = !this.show; 
    } 
}