2017-06-06 11 views
0

私はAngular 2プロジェクトで静的なJSONデータを表示しようとしています。私はコンソールエラー 'GET http://localhost:4200/app/data/MOCK_DATA.json 404(見つかりません)'を取得しています。私はservices.tsとcomponent.tsページを追加しました。Angular 2プロジェクトでJSONファイルを取得できません

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()) 

    } 
} 

それは静的であるので

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) 
    } 
+0

私は別のページにリダイレクトします – userlkjsflkdsvm

+0

angi-cliを使用している場合、アセットをアセットフォルダに追加し、そのフォルダに対してhttp要求を行う必要があります。 – echonax

+0

angular cliはassetsフォルダのjsonのみを許可しますか?... yes yes angularcliを使用しています – userlkjsflkdsvm

答えて

3

をapp.component.ts。 http.getは必要ありません。

は、ファイル/ JSONをチェックするために、クラス内console.log(json)その後、

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

を必要な場合、それをインポート

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

としてjson.tsファイル

輸出あなたのJSONファイルを作成します。

関連する問題