無法在Angular 2項目中檢索JSON文件

Question

我正在嘗試在我的angular 2項目中顯示靜態JSON數據。 我收到控制台錯誤“ GET http：// localhost：4200 / app / data / MOCK_DATA.json 404（未找到）”，我已經添加了services.ts和component.ts頁面。

service.ts

import { Injectable } from '@angular/core';
import { ConfigurationService } from '../../configuration.service';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs';
import { ListItem } from './list-item';


@Injectable()
export class DataService {

  constructor(
    private _http: Http,
    private _configurationService: ConfigurationService
  ) {}

 get() : Observable<ListItem[]> {
      return this._http.get("app/data/MOCK_DATA.json")
      .map((response: Response) => <ListItem[]> response.json())

  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DataService } from '../data.service';
import { ListItem } from './list-item';
import { Subscription } from 'rxjs';


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


  busy:Subscription;
  datas: ListItem[] = [];


  constructor(
    private _dataService: DataService,
    private _confirmationService: ConfirmationService,
    private _authService: AuthService,
    private _router: Router,
  ) { 


  }

  ngOnInit(){

  }
getdatas() {
    this.busy =
      this._dataService.get()
        .subscribe(data => this.datas = data)
  }

Answer 1

由於它是靜態的。 無需http.get 。

創建一個json.ts文件

將您的JSON文件導出為

export const json={
    "key":"value"
}

然后在需要的地方導入

import { json } from './json.ts'

然后在類內部的console.log(json)來檢查文件/ json。