角2の値がhtmlで更新されない

Question

Facebookのログインが必要なアプリケーションで作業しています。ここに私のtsが

ngOnInit() { 
    setTimeout(() => { 
     this.initialize(); 
    }) 
    } 

    initialize() { 
    (function (d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) return; 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 


    setTimeout(() => { 
     window.fbAsyncInit = () =>{ 
     FB.init({ 
      appId: 'your-app-id', //I gave my app id here 
      cookie: true, // enable cookies to allow the server to access 
      // the session 
      xfbml: true, // parse social plugins on this page 
      version: 'v2.8' // use graph api version 2.8 
     }); 
     this.checkFBLoginStatus(); 
     } 
    }) 

    } 

    checkFBLoginStatus() { 
    FB.getLoginStatus((response) =>{ 
     this.verifyResponse(response); 
    }); 
    } 


verifyResponse(response){ 
    this.response = response; 

    console.log(this.response) // I am getting the console output 
} 

ファイルであることはここに私のHTML

<!--For Testing purpose--> 
Response is-> 
<p *ngIf="response">{{response.status}}</p> 
<!--For Testing purpose--> 

<button *ngIf="response && response.status && response.status == 'unknown'" class="btn blue fb-login-button" (click)="loginUsingFacebook()"><span class="fa fa-facebook white-text"></span>Login Using Facebook</button> 

<button *ngIf="response && response.status && response.status == 'not_authorized'" class="btn blue fb-login-button" (click)="continueUsingFacebook()"><span class="fa fa-facebook white-text"></span>Continue Using Facebook</button> 

<button *ngIf="response && response.status && response.status == 'connected'" class="btn blue fb-login-button" (click)="logoutFacebook()"><span class="fa fa-facebook white-text"></span>Logout Facebook</button> 

のResponse.Statusがコンソールに表示されています。しかし、そのHTMLにバインドされていない。そして、私はそれぞれのボタンを見ることができません。

ユーザーがログインしているかどうかを検出しようとしていますが、javascript（facebook attr）のonlogin機能をtypescriptでキャプチャする最も良い方法は何ですか？

おかげ

Answer 1

fbAsyncInitメソッドからの戻りイベントはzone.js猿パッチを当てたイベントリスナーに認識されないためです。つまり、あなたは角度ゾーンの外で作業しています。

あなたのコンポーネントでNgZoneを注入し、runを使用して、それを再入力する必要があります

ここ

constructor(private _ngZone: NgZone){} 

ngOnInit() { 
    this.initialize(); 
} 

initialize() { 
    window.fbAsyncInit = () => { 
    this._ngZone.run(() => { 
     FB.init({ 
      ... 
     }); 
     this.checkFBLoginStatus(); 
    }); 
    } 
} 

Answer 2

手動でモデルデータを更新する必要があります。そして、そのために、あなたは以下のようにNgZone

を使用することができます

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

constructor() { 
    this.zone = new NgZone({enableLongStackTrace: false}); 
} 


verifyResponse(response){ 
    this.zone.run(() => { 
     this.response = response; 
    }); 

    console.log(this.response) // I am getting the console output 
}