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>

如何以角度2

1 个答案: