Angular 2：从 HTTP 访问 JSON 时出错

Question

我正在 angular 中创建应用程序 2. 我正在尝试通过服务中的 http 访问 json 数据。但是我收到一条错误消息说

**GET http://localhost:4200/data/products.json 404 (Not Found)**

我在指定的文件夹中有数据，但我无法访问它。

我的服务代码如下

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

@Injectable()
export class ItemService {
observableItems: Observable<Item[]>
allItems: Item[] = [];
selectedItems: Item[] = [];
errorMessage: string;
url = "http://localhost:4200/data/products.json";
constructor(private http:Http) { 
   this.observableItems = this.http.get(this.url).map((res: Response) => res.json());
   this.observableItems.subscribe(
             data => this.allItems = data,
         error =>  this.errorMessage = <any>error);
}
getItems(): Observable<Item[]> {
   return this.observableItems;
}
getSelectedItems(): Item[] {
   return this.selectedItems;
}   
    addItem(id:number): void {
       let item = this.allItems.find(ob => ob.id === id);
       if (this.selectedItems.indexOf(item) < 0) {     
      this.selectedItems.push(item);
   }
    }
    removeItem(id:number): void {
   let item = this.selectedItems.find(ob => ob.id === id);
   let itemIndex = this.selectedItems.indexOf(item);
       this.selectedItems.splice(itemIndex, 1);
    }
}

Answer 1

尝试使用从服务文件位置到文件的直接路径。例如：

url = "data/products.json";

它会起作用的。

Answer 2

我的 html 个文件在

"Project/src/app/..."

因此，要访问 JSON 文件，我需要从 tabs 文件夹和 app 文件夹返回以到达代码和图像的基本目录。我用 ../ 从文件夹返回。

由此我的 url 在服务中将如下所示：

url = "../../assets/data/products.json";

Angular 2：从 HTTP 访问 JSON 时出错

Angular 2: Error while accessing JSON from HTTP

json

angular-http

angular-services

angular