CODEWITHSUNDEEP
angularfacebook
user2572314
user2572314

Reputation: 49

Facebook Posts not showing up in angular 4 using ngx-facebook and ngFor

Ok this is a bit of a strange issue. I have a service which calls the Facebook Graph API to get a list of posts on a page. If I output the values returned to an anchor tag they show up fine and you can click on them and it will take you to the post. If i take one of these URL and use it for the tags href the post shows up. However, if i use ngFor to loop through the return values and use these as the URL nothing shows up. I've tried this using both a div surround the tag of the ngFor in the tag and still nothing shows up.

Facebook post component typescript

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)
    );

 }

}

Face post component template

Our Facebook Posts

  <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>

The results of this are shown in the image below. The reuslts of our facebook post component As you can see the URLs are being returned, however, when they are used in the <fb-post> as the URL for its href attribute using an angular variable then nothing is showing up. However, if I place one of the urls and hardcode it as the href then the post is returned. This is a real head-scratcher so I'm hoping one of you can help me resolve my issue.

Upvotes: 1

Views: 1783

Answers (2)

tehila
tehila

Reputation: 144

from what i understood, fb-post should be created at the activation of the component- I had this problem too, what I done to fix it was:

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

it simply call the data after it exists... in the component you do:

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

hope it helps :)

Upvotes: 1

match
match

Reputation: 11070

There can be some issues with using interpolation for property values, due to change detection - you might find that property binding is better, i.e.:

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

Upvotes: 0

Related Questions