javascript - Angular 2 การอัปเดตตัวแปรในฟังก์ชันลูกศร - Facebook

(ขอโทษเกี่ยวกับภาษาอังกฤษของฉัน)

สวัสดีครับ ผมกำลังพัฒนาเว็บไซต์ที่มีการล็อกอินด้วย Facebook โดยใช้ Angular 2 และ TypeScript อยู่ คนที่เคยช่วยผมเรื่องฟังก์ชันลูกศรไปก่อนหน้านี้ แต่ตอนนี้ผมไม่สามารถแสดงข้อมูลผู้ใช้บนหน้าจอได้
การล็อกอินสำเร็จแล้ว this.user ได้รับข้อมูลผู้ใช้ แต่ข้อมูลนั้นจะปรากฏบนหน้าจอได้ต้องทำบางอย่างก่อน เช่น กดปุ่ม (แม้จะไม่มีอีเวนต์ใด ๆ)

โค้ด (app.component.ts):

import {Component} from 'angular2/core';
import {Main} from './pages/main/main';

declare const FB: any;

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',
  directives: [Main]
})
export class AppComponent implements OnInit { 

token: any;
loged: boolean = false;
window.user = { name: 'Hello' };

constructor() { }

statusChangeCallback(response: any) {
    if (response.status === 'connected')
        this.me();
    else
        this.login();
}

login() {
    FB.login((result: any) => {
        this.loged = true;
        this.token = result;
        this.me();
    }, { scope: 'user_friends' });
}

me() {
    FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
        (result: any) => {
            console.log(result);
            this.user = result;
        });
}

ngOnInit() {
    FB.getLoginStatus(response => {
        this.statusChangeCallback(response);
    });
}
}

ฉันคิดว่าปัญหาของฉันอยู่ที่เมธอด me()

โค้ด (app/app.html):

<div class="navbar-header">
  <a class="navbar-brand" href="#">
    User name: {{user.name}}
  </a>
</div>

ฉันเป็นมือใหม่กับ Angular 2 และ TypeScript ดังนั้นฉันยังมีปัญหาอยู่ ขอบคุณ

คำตอบ #1

ฉันคิดว่าอ็อบเจ็กต์ FB ถูกสร้างขึ้นนอกบริบทของ Angular2 ดังนั้นการประมวลผลใน callback จะไม่ทำให้เกิดการตรวจจับการเปลี่ยนแปลง

คุณจำเป็นต้องรันโค้ดของคุณในโซน Angular2 โดยใช้คลาส NgZone:

constructor(private ngZone:NgZone) {
}

me() {
  FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
    (result: any) => {
      console.log(result);
      this.ngZone.run(() => { // <-----
        this.user = result;
      });
    });
}

คำตอบ #2

คุณกำลังระบุ window.user ที่ด้านบนของคอมโพเนนต์ของคุณ แต่คุณกำลังกำหนดตัวแปร user ซึ่งยังไม่ชัดเจนว่าคุณกำลังใช้ตัวไหนในเทมเพลตของคุณ แต่สิ่งนี้ดูเหมือนจะเป็นสาเหตุของปัญหาของคุณ