【问题标题】：Facebook Posts not showing up in angular 4 using ngx-facebook and ngForFacebook 帖子未使用 ngx-facebook 和 ngFor 以 Angular 4 显示
【发布时间】：2018-07-21 00:32:49
【问题描述】：

好吧，这有点奇怪。我有一项服务，它调用 Facebook Graph API 来获取页面上的帖子列表。如果我将返回的值输出到锚标记，它们会显示得很好，您可以单击它们，它会将您带到帖子。如果我采用这些 URL 之一并将其用于标签 href，则会显示该帖子。但是，如果我使用 ngFor 循环返回值并将它们用作 URL，则不会显示任何内容。我已经尝试过在标签中使用 div 围绕 ngFor 的标签，但仍然没有任何显示。

Facebook 帖子组件打字稿

import { Component, OnInit } from '@angular/core';
import {FacebookService, InitParams} from 'ngx-facebook';
import {FaceBookPostsService} from'../providers/facebook-graph-service.service';
import {Observable} from 'rxjs';



@Component({
  selector: 'app-facebook-posts',
   templateUrl: './facebook-posts.component.html',
  styleUrls: ['./facebook-posts.component.scss']
})
export class FacebookPostsComponent implements OnInit {


results= [];
error:any;
facebook:any;
constructor(private fb: FacebookService, private fbPost:FaceBookPostsService) {
    let initParams: InitParams = {
      appId: '***********',
      xfbml: true,
      version: 'v2.8'
    };
    fb.init(initParams);


    }
  ngOnInit() {
    this.fbPost.getPosts().subscribe(
      data => { this.results = data;
      console.log('values  in results');
      console.log(this.results);
      for (let i of this.results){

         console.log('url is ' + i.permalink_url);}
      },

      error => console.log(error)
    );

 }

}

人脸帖组件模板

我们的 Facebook 帖子

  <div  *ngFor="let post of  results.data">
  <fb-post  href="{{post.permalink_url}}" ></fb-post>
    <a href="{{post.permalink_url}}">{{post.permalink_url}}</a>


</div>

 <fb-post *ngFor="let post of  results.data" href="{{post.permalink_url}}"></fb-post>

  <h2> post Test</h2>
  <fb-post href="https://www.facebook.com/D2DMARYHILL/videos/169438470323930/">
 </fb-post>

结果如下图所示。如您所见，正在返回 URL，但是，当它们在 <fb-post> 中使用 angular 变量作为其 href 属性的 URL 时，则什么也没有显示。但是，如果我放置其中一个 url 并将其硬编码为 href，则返回该帖子。这是一个真正令人头疼的问题，所以我希望你们中的一个可以帮助我解决我的问题。

【问题讨论】：

标签： angular facebook

【解决方案1】：

据我了解，fb-post 应该在组件激活时创建-我也遇到了这个问题，我做了什么来解决它：

    <app-facebook-posts *ngIf="fbPost.your-data.length>0"></app-facebook-posts>

它只是在数据存在后调用它...... 在你做的组件中：

    <div *ngFor="let item of fbPost.your-data">
      <fb-post showText="true" width="auto" [href]="item">{{item}}</fb-post>
    </div>

希望对你有帮助:)

【讨论】：

【解决方案2】：

由于更改检测，对属性值使用插值可能会出现一些问题 - 您可能会发现属性绑定更好，即：

<a [href]="post.permalink_url">{{post.permalink_url}}</a>

【讨论】：

我试过<fb-post [href]="post.permalink_url">{{post.permalink_url}}</fb-post> ，但还是不行