Angular 2的值在html中不更新

我正在开发一个需要facebook登录的应用程序。这里是我的TS文件Angular 2的值在html中不更新

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脚本的onlogin函数（facebook attr）打字稿。

感谢

来源

2017-06-06 Alaksandar Jesus Gene

这是因为从fbAsyncInit方法的返回事件不是由zone.js猴子修补事件侦听器的认可。换句话说，你在角度区外工作。

你应该在你的组件注入NgZone，并使用run重新输入：

constructor(private _ngZone: NgZone){} 

ngOnInit() { 
    this.initialize(); 
} 

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

来源

2017-06-06 06:51:34 PierreDuc

在这里，您将不得不手动刷新模型数据。为此，你可以使用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 
}

来源

2017-06-06 06:52:27

Angular 2的值在html中不更新

回答

相关问题