角度2でjsonデータをレンダリングする方法

Question

jsonデータリストを出力しようとしています。しかし、エラーメッセージERROR TypeError: Cannot read property 'title' of undefinedが表示されます。私がコンソールログをチェックすると、jsonが出力されているのがわかりました。

mydata.service.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 

export class MyDataService { 
    post = ''; 
    constructor(private http: Http) { 
    } 
    fetchData(){ 
     return this.http.get('assets/page-content.json').map(
     (response) => response.json() 
    ).subscribe(
     data => { 
      this.post = data; 
      console.log(this.post); 
     } 
    ) 
    } 
} 

ページ-content.component.html

<div class="search-results" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" (scrolled)="onScroll()"> 
    <h1>Title: {{post.title}}</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet dignissim nibh. Praesent tempus risus at metus finibus, at luctus nisi maximus. Sed enim urna, suscipit at dignissim eget, fermentum semper lacus. Donec nec ligula tristique, volutpat sem a, posuere nisl. Sed vehicula leo ut nulla maximus, eu mattis diam placerat.</p> 
</div> 

ページ-content.json

[ 
    { 
     "id": 1, 
     "title": "Sample title 1", 
     "description": "<p class=\"abc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet dignissim nibh. Praesent tempus risus at metus finibus, at luctus nisi maximus. Sed enim urna, suscipit at dignissim eget, fermentum semper lacus. Donec nec ligula tristique, volutpat sem a, posuere nisl. Sed vehicula leo ut nulla maximus, eu mattis diam placerat.</p>" 
    }, 
    { 
     "id": 2, 
     "title": "Sample title 2", 
     "description": "<p class=\"abc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet dignissim nibh. Praesent tempus risus at metus finibus, at luctus nisi maximus. Sed enim urna, suscipit at dignissim eget, fermentum semper lacus. Donec nec ligula tristique, volutpat sem a, posuere nisl. Sed vehicula leo ut nulla maximus, eu mattis diam placerat.</p>" 
    }, 
    { 
     "id": 3, 
     "title": "Sample title 3", 
     "description": "<p class=\"abc\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet dignissim nibh. Praesent tempus risus at metus finibus, at luctus nisi maximus. Sed enim urna, suscipit at dignissim eget, fermentum semper lacus. Donec nec ligula tristique, volutpat sem a, posuere nisl. Sed vehicula leo ut nulla maximus, eu mattis diam placerat.</p>" 
    } 
] 

Answer 1

サービスを購読しないでください。データではなくサブスクリプションオブジェクトのみを返します。

fetchData(){ 
     return this.http.get('assets/page-content.json').map(
     (response) => response.json() 
    ) 
    } 

そして、あなたの PageContentComponent.tsで

、 多分 ngOnInitで、htmlのあなたで

export class PageContentComponent implements OnInit { 
    constructor(private newService: MyDataService) { } 
    posts = ''; 
    ngOnInit() { 
    this.newService.fetchData().subscribe(data=>{ 
     this.posts = data; 
    }); 
    }  
} 

そして最後に、

<div *ngIf="posts"> 
<li *ngFor="let post of posts"> 
     {{ post.title}} 
</li> 
</div>