來自Facebook Graph Api的角度2地圖響應

我使用http調用Graph API從Facebook頁面獲取帖子。來自Facebook Graph Api的角度2地圖響應

的代碼從哪裏獲得柱的陣列是：

let url = 'https://graph.facebook.com/15087023444/posts?fields=likes.limit(0).summary(true),comments.limit(0).summary(true),type,message,created_time,link,name,caption,description,attachments{subattachments,media,type}&limit=10'; 

return this.http 
    .get(url, requestOptions) 
    .map(response => response.json())

該響應具有data陣列與柱和一個paging對象與分頁網址。

下面是一個例子：

{ 
    "data": [ 
    { 
     "type": "video", 
     "message": "Debate This. Kevin Durant is now a world champion. #NikeBasketball", 
     "created_time": "2017-06-13T03:48:09+0000", 
     "link": "https://www.facebook.com/nike/videos/10155067082768445/", 
     "attachments": { 
     "data": [ 
      { 
      "media": { 
       "image": { 
       "height": 316, 
       "src": "https://scontent.xx.fbcdn.net/v/t15.0-10/19144894_10155067101998445_7200648628933754880_n.jpg?oh=a5280076d9790c89fe97b144992f68c1&oe=59DFA425", 
       "width": 600 
       } 
      }, 
      "type": "video_autoplay" 
      } 
     ] 
     }, 
     "id": "15087023444_10155067082768445" 
    } 
    ], 
    "paging": { 
    "cursors": { 
     "before": "Q2c4U1pXNTBYM0YxWlhKNVgzTjBiM0o1WDJsa0R5QXhOVEE0TnpBeU16UTBORG90TVRVMk5UUTROelV5TlRjNU9UVTROVGc0TWc4TVlYQnBYM04wYjNKNVgybGtEeDB4TlRBNE56QXlNelEwTkY4eE1ERTFOVEEyTnpBNE1qYzJPRFEwTlE4RWRHbHRaUVpaUDJCNUFRPT0ZD", 
     "after": "Q2c4U1pXNTBYM0YxWlhKNVgzTjBiM0o1WDJsa0R5QXhOVEE0TnpBeU16UTBORG90TVRVMk5UUTROelV5TlRjNU9UVTROVGc0TWc4TVlYQnBYM04wYjNKNVgybGtEeDB4TlRBNE56QXlNelEwTkY4eE1ERTFOVEEyTnpBNE1qYzJPRFEwTlE4RWRHbHRaUVpaUDJCNUFRPT0ZD" 
    }, 
    "next": "https://graph.facebook.com/v2.9/15087023444/posts?access_token=EAACEdEose0cBALc3s7rQrG3c3gT6rKzb7ATiu9hj18T3sgxLPEBrF3U5b0SJ8uP3kGJne4PPS6KpsLiiQiSLVmZAhY5W1gj7JvEAflL55K1tcWHLDUbmTnyrIN0HZBJkp6u6zziSmWWWqGeEEJlZCaGR52xisCWJ92Hr9GkUJx0T7MS1tnQZAjVNv3GH5sYZD&pretty=0&fields=likes.limit%280%29%2Ccomments.limit%280%29%2Ctype%2Cmessage%2Ccreated_time%2Clink%2Cname%2Ccaption%2Cdescription%2Cattachments%7Bsubattachments%2Cmedia%2Ctype%7D&limit=1&after=Q2c4U1pXNTBYM0YxWlhKNVgzTjBiM0o1WDJsa0R5QXhOVEE0TnpBeU16UTBORG90TVRVMk5UUTROelV5TlRjNU9UVTROVGc0TWc4TVlYQnBYM04wYjNKNVgybGtEeDB4TlRBNE56QXlNelEwTkY4eE1ERTFOVEEyTnpBNE1qYzJPRFEwTlE4RWRHbHRaUVpaUDJCNUFRPT0ZD" 
    } 
}

我試圖做的是映射爲了得到這兩個值（data陣列和paging對象）轉換成可以在使用兩個獨立的變量，這個響應視圖。像這樣得到的數據陣列，並將其分配到可觀察：

public posts: Observable<any[]>; 

this.posts = this.facebookProvider 
     .getPosts(this.pageId) 
     .map(data => data['data'].map(this.mapPosts))

而且mapPosts功能：

mapPosts = (post) => { 
    return { 
     id: post.id 
     message: post.message, 
     attachments: post.attachments, 
     likes: post.likes.summary.total_count, 
     comments: post.comments.summary.total_count 
    }; 
    }

我怎樣才能獲得paging對象，並將其分配給一個變量？有沒有辦法實現這個沒有兩個單獨的調用api？

謝謝。

來源

2017-06-18 fana

通常您的組件將訂閱服務中的值。

如果你只顯示值比你不需要可觀測public posts: Observable<any[]>;

可以使用普通變量一樣public posts : any[] = [];

this.facebookProvider 
     .getPosts(this.pageId).subscribe(data => { 
this.posts = data['data'].map(this.mapPosts); 
this.paging = data.paging}

）;

來源

2017-06-19 01:33:57 CharanRoot

謝謝，完美的作品。只是注意到我在ngFor中使用的異步管道停止了工作。移除管道工作正常。你認爲異步管道仍然可以使用或沒有必要嗎？ – fana

如果你只是顯示的數據比你不需要使用異步管道。如果您直接使用服務中的observable，則需要使用Async pipe.check此鏈接http://www.concretepage.com/angular-2/angular-2-async-pipe-example – CharanRoot

來自Facebook Graph Api的角度2地圖響應

回答

相關問題