如何呈現json數據的角度2

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，

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

在你的HTML

最後，

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