は、HTTPを使用してデータを角度取得

Question

の読み込みに失敗しました。私は、JSONデータをフェッチしようとしているが、コンソールメッセージを取得することができません、私は角度で新しい午前=リソースのロードに失敗しましたされます。サーバーは、404の状態（見つかりません）

と答え

data.service.tsコードが

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

@Injectable() 
export class DataService { 
private _url: string = "apidata/mydata.json"; 
constructor(private _http : Http) {} 

getSideNavTitle(){ 
return this._http.get(this._url) 
.map((response:Response) => response.json()); 
} 

testMethod() { 
return 'test page or file from the serices file'; 
} 

} 

service.test.component.ts

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../data.service'; 


const HEROES = [ 
{id: 1, name:'AAAAA'}, 
{id: 2, name:'BBBBB'}, 
]; 

@Component({ 
    selector: 'app-service-test', 
    templateUrl: './service-test.component.html', 
    styleUrls: ['./service-test.component.css'] 
}) 
export class ServiceTestComponent implements OnInit { 
setTitle = []; 
heroes = HEROES; 
titlepg:string; 

constructor(private _exampleService: DataService) { } 

ngOnInit() { 
this.titlepg = this._exampleService.testMethod(); 

this._exampleService.getSideNavTitle() 
.subscribe(resDataService => this.setTitle = resDataService); 

} 
} 

サービスtest.component.html

<div class="container"> 
<h1>{{ titlepg }}</h1> 
<div class="row"> 
<div class="col-md-3 topic-pad"> 
    <div class="list-group cour-nav-list"> 
    <a href="" class="list-group-item active"> First Title </a> 
    <a *ngFor="let titleKo of setTitle" href="" class="list-group-item list- 
    group-item-action">{{ titleKo.title}}</a> 
    </div> 
</div> 
</div> 
</div> 

とmydata.jsonをサーバーを持っていない場合、それは、メモリ内のWeb API私たちにお勧めです

[ 
{"id": 1, "title":"TitlePart-1"}, 
{"id": 2, "title":"TitlePart-2"}, 
{"id": 3, "title":"TitlePart-3"}, 
{"id": 4, "title":"TitlePart-4"}, 
{"id": 5, "title":"TitlePart-5"}, 
{"id": 6, "title":"TitlePart-6"}, 
{"id": 7, "title":"TitlePart-7"} 
] 

Answer 1

です。あなたにはあなたのコード

への変更を以下の

メイクは

import { InMemoryDataService } from './in-memory-data.service'; 

@NgModule({ 
    imports: [ 
    InMemoryWebApiModule.forRoot(InMemoryDataService), 
    ] 

}) 

をapp.ts新しいサービスを作成する - あなたのdata.service.tsで

import { InMemoryDbService } from 'angular-in-memory-web-api'; 
export class InMemoryDataService implements InMemoryDbService { 
    createDb() { 
    let yourvar = [ 
     {"id": 1, "title":"TitlePart-1"}, 
     {"id": 2, "title":"TitlePart-2"}, 
     {"id": 3, "title":"TitlePart-3"}, 
     {"id": 4, "title":"TitlePart-4"}, 
     {"id": 5, "title":"TitlePart-5"}, 
     {"id": 6, "title":"TitlePart-6"}, 
     {"id": 7, "title":"TitlePart-7"} 
    ]; 
    return {titles}; 
    } 
} 

URL

private myurl = 'api/yourvar'; 

を使用します