角度2のテンプレートが角度ゾーン外の呼び出しから更新されないのはなぜですか？

Question

私は、次の手順を実行しますコンポーネントが結合したユーザー名とパスワードのプロパティを持つ、非常に単純なログインフォームを作成するだろうと思った：

1. THENフェッチ（）呼び出し
2. と資格証明書を提出する応答結果を取得オブジェクトのJSONコンテンツ
3. THEN資格情報が間違っていた場合は、それがクラスを適用する角度言うだろうコンポーネントのプロパティを変更しますサーバー側のチェック

の結果のためにその内容をご確認くださいユーザー名とパスワードの入力を一時的に赤色にする（setTimeoutを使用してそれを元に戻す）

私が遭遇した問題は、Angularがクラスを正しく適用できないことと、理由がわかりませんでした。私は、問題を絞り込むための単純化されたテストプロジェクトを作成し、システムpolyfills/when.jsが含まれてしまうことになった。

このコードは、1,2、および3を通り、両方をコンポーネントプロパティに設定し、デバッグコンソールに出力します。角システムポリフィルは、それがコンソールは、プロパティが実際に変更されることを示しているにもかかわらず、1で停止し、決して2または3に変更します。その場合に、含まれていない限り、正しくコンポーネントプロパティをレンダリング：

export class App { 
    private stateIndicator:string = "0"; 

    public showState(state:string) { 
     console.log('State: ' + state); 
     this.stateIndicator = state; 

    } 

    public showFetchProblem() { 
     this.showState('1') 
     fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => { 
      this.showState('2') 
      response.text().then((value) => { 
       this.showState('3') 
      }); 
     }); 
    } 
} 

Manuaは、手動でシステム-polyfillsが含まれる、または

ないでください

1. ：http://plnkr.co/edit/GR9U9fTctmkSGsPTySAI?p=preview

   そして、ええ、明白な解決策は以下のとおりです。私はこの動作を示すために、次のPlunkerを作成しましたあなたはそれ

が必要な場合は、LLY SystemJS前differenyプロミスのポリフィルを含むが、なぜこれが起こっている私はまだ好奇心旺盛だし、うまくいけば、誰かが（基本問題を解決するのに役立つ可能性と）、この上でいくつかの光を当てることができます。

編集：このオリジナルのタイトルはWhy is Angular 2's template rendering misbehaving when using system-polyfills (when.js)です。ティエリーとギュンターのおかげで、Angular 2のゾーンの使用が貢献していることを指摘してくれました。

1. http://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html
2. http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

：将来的にはこの遭遇誰のために、ここではさらに詳細にゾーンを説明し、あなたがそれに実行する必要があり、このシナリオのご理解を向上させます2件の優秀な記事があります

Answer 1

Angularsゾーンでパッチが適用されていないfetchによって引き起こされていると仮定約束のAngular2の範囲外で実行することができます。ゾーン内ではない）。

Angular2で管理されているゾーン（NgZoneクラス）でコードを明示的に実行すると、system-polyfill.jsファイルが含まれている場合に機能します。ここで

はサンプルです：http://plnkr.co/edit/EJgZKWVx6FURrelMEzN0?p=preview：

constructor(private zone:NgZone) {} 

public showFetchProblem() { 
    this.showState('1') 
    this.zone.run(() => { 
    fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => { 
     this.showState('2') 
     response.text().then((value) => { 
     this.showState('3') 
     }); 
    }); 
    }); 
} 

は、対応するplunkrを参照してください。

Answer 2

更新

これ以上の説明はありませんが、回避策が動作します。しかし、私はそこに他の根本的な問題があると思います。

も参照してくださいhttps://github.com/angular/angular/issues/7792#issuecomment-211217775

元

私は問題がプロミスポリフィルは、カスタム実装を提供

To work around make the code execute inside Angulars zone manually 

export class App { 
    constructor(private zone:NgZone) {} 

    private stateIndicator:string = "0"; 

    public showState(state:string) { 
     console.log('State: ' + state); 
     this.stateIndicator = state; 

    } 

    public showFetchProblem() { 
     this.showState('1') 
     fetch('http://www.google.com/robots.txt',{mode:'no-cors'}).then((response:any) => { 
      this.showState('2') 
      response.text().then((value) => { 
       this.zone.run(() => this.showState('3')); 
      }); 
     }); 
    } 
} 

Plunker example