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

Get data from json file in Angular 2

我有一个 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);
      });
  }

}

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

您需要 return 您的 map 声明中的内容:

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

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

ngOnInit() {
   this.getRecords();
}

您还需要 return 来自响应的实际 json,即 .json() 所以:

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