troubleshooting Question

angular 2 problem setting an object inside a subscribe section

Avatar of derrida
derrida asked on
JavaScript
15 Comments1 Solution538 ViewsLast Modified:
hi
i get the id of a post from the url, then getting the post contents. then i want to set my meta object . that is the logic but it does,'t work inside the subscribe, while it does outside of it. it is async so how can i set the meta object, populate it?
this is the entire component code:
import { Component, OnInit,OnDestroy,AfterViewInit,Renderer } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/RX';
import {AppService} from '../services/app.service';
import { MetaSetterService } from '../services/meta-setter.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit,OnDestroy,AfterViewInit {

  subscription: Subscription;
  postId:String;
  thepost;
  meta:Object = {};
  post;
  postTitle:String;

  constructor(
    private router: Router, 
    private activeR: ActivatedRoute,
    private as:AppService,
    private metaSetter:MetaSetterService,
    public renderer:Renderer
  ) {
    
    this.subscription = this.activeR.params.subscribe(
      (param:any) => {
        this.postId = param['id'];
      }
    )
   }

  ngOnInit() { 
    this.as.getPostById(this.postId).subscribe(
      (post) => {
        this.thepost = post;
        console.log(this.thepost);
        this.postTitle = post.title;
        this.meta['title'] = 'title of the post';
        this.meta['metaTitle'] = 'meta tag title';
        this.meta['metaDesc'] = 'dynamic description for post';
        this.meta['metaKeywords'] = 'dynamic,keywords,post';
        this.meta['ogTitle'] = 'post title';
        this.meta['ogDesc'] = 'dynamic description to share post';
        this.meta['ogImg'] = '/assets/images/postimage.jpg';
        this.meta['ogUrl'] = '/post/idpost';
      }
    );
    //console.log(this.thepost);
    // this.meta['title'] = 'title of the post';
    // this.meta['metaTitle'] = 'meta tag title';
    // this.meta['metaDesc'] = 'dynamic description for post';
    // this.meta['metaKeywords'] = 'dynamic,keywords,post';
    // this.meta['ogTitle'] = 'post title';
    // this.meta['ogDesc'] = 'dynamic description to share post';
    // this.meta['ogImg'] = '/assets/images/postimage.jpg';
    // this.meta['ogUrl'] = '/post/idpost';
  }



  ngOnDestroy(){
    this.subscription.unsubscribe();
  }

  ngAfterViewInit():void{
    this.metaSetter.setAll(this.renderer,this.meta);
  }


}

and this is the method for getting the post by id:
  getPostById(id:String){
    let url = this.apiURL + '/blog.json';
    return this.http.get(url,{headers:this.headers})
      .map(posts => {
        return posts.json().filter(post => post._id === id)[0];
      })
  }

i'm refering to the code in the ngOnInit. setting the meta inside doesn't work, while outside it does.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 15 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 15 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros