Angular 无法加载使用Http的角度提取数据

我是Angular的新手，我正在尝试获取json数据，但无法获取控制台消息is=加载资源失败：服务器响应状态为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);

 }
}

service-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>

---

如果您没有服务器，则建议我们使用内存中的web API

对代码进行以下修改

在你的应用程序中

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

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

})

创建新服务-

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};
  }
}

在data.service.ts中使用URL

private myurl = 'api/yourvar'; 

---

如果您想加载json，您需要使用服务器。我们不能从文件中获取数据吗？如果没有，那么是否有任何可用的免费服务器供我尝试？是的，您可以使用“npm安装http服务器”和“http服务器”或创建简单的nodejs服务器。是的，您可以从文件加载。404错误意味着找不到该文件。尝试并附加从顶部文件夹（src）开始的完整“url”。如果这不起作用，你可能有一个资产文件夹，试着把它移到那里（无论如何这是一个很好的做法）。@hurricane For practice我们可以像Ya一样使用免费服务器数据库吗？我从这里得到了更多信息

private myurl = 'api/yourvar';