Javascript 如何在angular 2中呈现json数据

我正在尝试输出json数据列表。但是，我收到一条错误消息

错误类型错误：无法读取未定义的属性“title”

。当我检查控制台日志时，我可以看到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);
        }
      )
  }
}

页面内容.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>

标题：{post.Title}
Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安坐在一位显贵的尼布面前。在梅特斯·菲尼布斯，在卢克图斯·尼西·马克西姆斯，都有这样的一个时刻。Sed enim urna，在Vignessim eget担任副总裁，发酵剂semper lacus。Donec nec ligula tristique，Volvata，posuere nisl。这是一种巨大的交通工具

页面内容.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>"
    }
]

[
{
“id”：1，
“标题”：“示例标题1”，
“说明”：“Lorem ipsum door sit amet，concertetu adipise elit.Aenean sit magnessim nibh.present tempus risus at metus finibus，at luctus nisi maximus.Sed enim urna，suscipit at dignessim eget，concertium semper lacus.Donec nec ligula tristique，volatipat sem a，posuere nisl.Sed vehicle leo ut nulla maximus，eu matis diam placerat.
”
},
{
“id”：2，
“标题”：“示例标题2”，
“说明”：“奥雷姆·伊普斯姆·多洛·塞特·塞特·塞特·塞特·伊普斯姆·多洛·塞特·塞特·塞特·塞特·伊普斯姆·厄纳、塞特·塞姆·塞姆·塞姆·塞姆·塞姆·拉克斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞特、塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·拉克斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·
},
{
“id”：3，
“标题”：“示例标题3”，
“说明”：“奥雷姆·伊普斯姆·多洛·塞特·塞特·塞特·塞特·伊普斯姆·多洛·塞特·塞特·塞特·塞特·伊普斯姆·厄纳、塞特·塞姆·塞姆·塞姆·塞姆·塞姆·拉克斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞特、塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·拉克斯·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·塞姆·
}
]

您不应该订阅该服务。它只会返回订阅对象，而不会返回数据

  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>

{{post.title}

您不应该订阅该服务。它只会返回订阅对象，而不会返回数据

  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>

{{post.title}

post

是一个数组吗？是的

post

在数组中。

post

是一个数组吗？是的

post

在数组中。捕捉得好，我刚要写一个答案，就注意到了，过了一会儿才看到：D