显示 angular 的 Facebook 活动

Question

我想在我的网站上显示活动。

我用这个从 facebook 获取事件:

infos.service.ts :

getEvents(link: string): Observable<any>{

let id = link.split('facebook.com/')[1].split('?')[0];
console.log("id ------> ",id);

return this.http.get(`https://graph.facebook.com/${id}?fields=events{name}&access_token=`)      
    .map(events => events.json());
}

在 home.component.ts 之后：

onChange(e: Event) {

let value = e.target['value'];
this.service.getEvents(value).subscribe(event => {
  console.log('events: ', event);
})
    this.service.getEvents(value).subscribe((data) => this.events=data);

  }
}

我用它来显示：

 <ul>
    <li> {{ events | json}}</li>
</ul>

但它告诉我，我不能使用 *ngFor :

"events": { "data": [ { "name": "Qui veut partir à Ibiza avec la team Coke TV cet été ?", "id": "1039032149505674" }, { "name": "MoveMyCity #MoveLyon", "id": "891490744279264" }, { "name": "MoveMyCity #MoveToulouse", "id": "816021265181647" }, { "name": "MoveMyCity #MoveMontpellier", "id": "801781889934749" }, { "name": "MoveMyCity #MoveMarseille", "id": "1610198129252793" }, { "name": "MoveMyCity #MoveNantes", "id": "936652956376199" }, { "name": "MoveMyCity #MoveParis", "id": "1609074386008334" } ], "paging": { "cursors": { "before": "QVFIUmdUc21tQW80b0tzLVgtc3VtUHI5OFNxdlZAMaVUwZAW02R1JvbGs4ZAUVwTUpmbUNiSVJ5eTBHVXMwSkw4RkFQQWNzZA3o1eTgzN2hxUFVINnlzd1ZA1eE93", "after": "QVFIUjgtRUUwR29ud25QdlE2YmVhQ3BfZAXdsd1R2SDlqeWlaeEk5empwVlBWQ1VkOXFtUkF2VUVPQlhvMWlLaHdNZA2VXczBuQkpyc0o1V2dNQUdZAYjllVE1B" } } }, "id": "998589190158511" }

感谢您的帮助。

Answer 1

我将进入 JSON 并提取数组：

return this.http.get('the url')      
    .map(events => events.json().events.data);
}

组件代码将保持不变，然后您可以很好地迭代数据：

<div *ngFor="let event of events">
  {{event.name}}
</div>

如果你不想只提取数组，而是想保持代码原样，那么你需要像这样迭代：

<div *ngFor="let event of events.events.data">
  {{event.name}}
</div>

显示 angular 的 Facebook 活动

Show Facebook events with angular

facebook

display

angular