[Angular2 + Facebook图形API]：找不到类型为'object'的不同支持对象'[object Object]'

Question

我正在尝试创建一个服务来调用角2中的Facebook Graph API。

也许，我做错了什么，因为我无法实现它的工作。

错误： 无法找到类型为'object'的不同支持对象'[object Object]'。 NgFor仅支持与阵列等Iterables绑定。

这里是我的代码：

• 服务

  import { Injectable } from '@angular/core'; 
  import { Http } from '@angular/http'; 
  import { Observable } from 'rxjs/Observable'; 
  import 'rxjs/Rx'; 
  
  let URL = 'https://graph.facebook.com/me'; 
  
  @Injectable() 
  export class FacebookService { 
  
      constructor (private http:Http) { 
       this.http = http; 
      } 
  
      getInfo(accessToken: string) { 
       return this.http.get(URL + '?access_token=' + accessToken) 
        .map(res => res.json()) 
        .catch(this.handleError);   
      } 
  
      handleError(error) { 
       console.error(error); 
       return Observable.throw(error.json().error || 'Server error'); 
      } 
  } 
  

• 组件：

  import { Component, OnInit } from '@angular/core'; 
  import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router'; 
  import { Observable } from 'rxjs/Observable'; 
  import 'rxjs/Rx'; 
  
  import { AboutComponent } from './+about'; 
  import { HelpComponent } from './help'; 
  
  import { FacebookService } from './facebook.service'; 
  
  @Component({ 
      moduleId: module.id, 
      selector: 'leaddockets-app', 
      templateUrl: 'leaddockets.component.html', 
      styleUrls: ['leaddockets.component.css'], 
      directives: [ROUTER_DIRECTIVES], 
      providers: [ROUTER_PROVIDERS, FacebookService] 
  }) 
  @Routes([ 
      {path: '/about', component: AboutComponent}, 
      {path: '/help', component: HelpComponent} 
  ]) 
  export class LeaddocketsAppComponent implements OnInit { 
  
      title = 'leaddockets works!'; 
  
      info:Observable < Array<Object> >; 
  
      constructor(private fbService:FacebookService) { 
      this.info = this.fbService.getInfo(facebook.accessToken); 
      } 
  
  } 
  

• 模板：

  <ul *ngFor="let obj of info | async"> 
      <li class="text"> 
      {{obj.$value}} 
      </li> 
  </ul> 
  

我在做什么错？

谢谢。

Answer 1

您需要在返回数据之前提取数据。我的代码正在承诺中返回，但其概念相同。

getFacebookFriends() { 
    return this.http.get('https://graph.facebook.com/me/invitable_friends access_token=' + YOUR_TOKEN) 
     .toPromise() 
     .then(this.extractData); 
} 

private extractData(res) { 
    let body = res.json(); 
    return body.data || {}; 
}