Mapping data returned from service

Question

Have a method in a service that returns data, and while debugging I can see data within the "res" variable at run time

getBlogPosts(): Observable<BlogPost[]> {
    var headers = new Headers();        
    headers.append('Content-Type', 'application/json');        
    return this.http.post("http://dlocal.test.com/api/fNet/GetBlogPosts",
        { postDate: '', bodyContent: '', Title: '' })          
        .map((res: Response) => {
            return <BlogPost[]>res.json();
        }).catch(this.handleError);
}

Sample of data being returned from API:

[{
    "Id": 1,
    "Title": "title1",
    "BodyContent": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. test",
    "TagList": null,
    "DateCreated": "2017-09-13T00:00:00",
    "DateUpdated": "2017-09-13T00:00:00",
    "CreatedByUser": null,
    "UpdatedByUser": null
}, {
    "Id": 2,
    "Title": "title2",
    "BodyContent": "lkj kjlkaj lkjlaksdjf lkj kljlkj",
    "TagList": null,
    "DateCreated": "2017-09-13T00:00:00",
    "DateUpdated": "2017-09-13T00:00:00",
    "CreatedByUser": null,
    "UpdatedByUser": null
}]

However, with the component that is making a call to this service, I think I am not doing something right to see the returned values. The member 'data' is undefined. What am I doing wrong?

getBlogPosts() {
    this.blogService.getBlogPosts()
        .subscribe((data) => {
            this.BlogPostList = data;
        });        
}

[ update 2 ]

component:

ngOnInit(): void { 
    this.blogService.getBlogPosts()
      .subscribe((data: BlogPost[]) => {
      this.BlogPostList = <BlogPost[]>data;               
    }); 
}

service method:

getBlogPosts(): Observable<BlogPost[]> {
    var headers = new Headers();        
    headers.append('Content-Type', 'application/json');        
    return this.http.post("http://dlocal.test.com/api/fNet/GetBlogPosts",
        { postDate: '', bodyContent: '', Title: '' })
        .map(response => response.json())
        .catch(this.handleError);
}

template

<div *ngFor="let b of BlogPostList" class="col-md-5">
   Title= {{b.title}}
</div>

Lets try this again:
Couldn't get things to wire up using any types. I can see data being returned, but it wont map and BlogPostList results in undefined inside ngOnInit. After reading through examples on Observables I thought I understood this stuff. I guess I dont

[ update 3 ]

BlogPost

import { IBlogPostModel } from "./interfaces";

export class BlogPost implements IBlogPostModel{

    Id: number;
    Title: string;
    BodyContent: string;
    TagList: string;
    DateCreated: string;
    DateUpdated: string;
    CreatedUser: string;
    UpdatedUser: string;

    constructor(values: Object = {}) 
    { 
        Object.assign(this, values);

    }
};

component

import { Component,OnInit } from '@angular/core';
import { ItBlogService } from './itdept.blog.service';
import { BlogPost } from '../model/blogpost';
import { Observable } from 'rxjs/Observable';


@Component({
    selector: 'itdept',
    templateUrl: 'app/itdept/itdept.component.html'
})
export class ItdeptComponent {

    public name: string;
    public BlogPostList: BlogPost[] = new Array<BlogPost>();

    constructor(private blogService: ItBlogService) {      

    }

    ngOnInit(): void {
        this.blogService.getBlogPosts()
            .subscribe(data => {
                this.BlogPostList = <BlogPost[]>data;
                //return <BlogPost[]>data;
            });    
    }

}

Service:

import { Injectable } from '@angular/core';
import { Http,Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BlogPost } from '../model/blogpost';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import {User} from './user';



@Injectable()
export class ItBlogService {

    _baseUrl: string = '';

    constructor(private http:Http) {
        console.log('ItDeptBlogService Service created.', http);
    }

     getBlogPosts(): Observable<BlogPost[]> {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.post("http://dlocal.test.com/api/fNet/GetBlogPosts",
            { postDate: '', bodyContent: '', Title: '' })
            .map(response => response.json())
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json() || 'Server error');
    }

component template

<div *ngFor="let b of BlogPostList" class="col-md-5">
   Title= {{b.bodyContent}}
</div>

[ update 4 - what finally got it working ]
After re-reading several examples on observables, I was just making things overly complicated. So now, my ngOnInit looks like that below.

ngOnInit(): void {
    this.blogService.getBlogPosts()
        .subscribe(data => {
            this.BlogPostList = data;
            console.log(data);
            console.log("test");
            //return <BlogPost[]>data;
        });    
}

Answer 1

If you are trying to show these data in Ui in html you can use async pipe rather storing them in a variable and using that variable in the html.

this.BlogPostList = this.blogService.getBlogPosts()
    .map((data) => {
        return data;
    });        

And then in your ui you can use async pipe

<div *ngFor="let blog of BlogPostList"> ... </div>

if you are fighting with typing then test with any first and then you can adjust typings

getBlogPosts(): Observable<any> {
    var headers = new Headers();        
    headers.append('Content-Type', 'application/json');        
    return this.http.post("http://dlocal.test.com/api/fNet/GetBlogPosts",
        { postDate: '', bodyContent: '', Title: '' })
        .map(response => response.json())
        .catch(this.handleError);
}