json - 从 Angular 2 中的 json 文件获取数据

Question

我有一个 json 文件，我试图将此信息放入我的项目中，并使用 Angular 2 中的服务。这是我的代码:

这是我的服务:

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

@Injectable()
export class RecordsService {

data: any;

  constructor(private http: Http) { }

  getRecords(id) {
 return this.http.get('../assets/data/03_data.json')
      .map(data => {
        this.data = data;
      }, err => {
        if (err) {
          return err.json();
        }
      });
  }

}

就是这个组件:

import { Component, OnInit } from '@angular/core';
import { RecordsService } from '../shared/services/records.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  providers: [RecordsService]
})
export class ContentComponent implements OnInit {

  constructor(private recService: RecordsService) { }

  ngOnInit() {
  }

  getRecords(id) {
    this.recService.getRecords(id)
      .subscribe(data => {
      console.log(data);
      }, err => {
        console.log(err);
      });
  }

}

谁能帮我看看我做错了什么。谢谢!

Answer 1

您没有在任何地方调用 getRecords()，所以它根本不会被触发。我们发现 id 根本不应该是 getRecords() 中的参数。所以调用OnInit中的方法:

ngOnInit() {
   this.getRecords();
}

您还需要从响应中返回实际的 json，即 .json() 这样做:

.map(data => {
   this.data = data.json();
   return data.json();
}