如何在 Angular 2+ 中获取 json 数据

Question

我正在尝试显示一个列表，其中包含从本地 json 文件中获取的数据。这是我的服务到目前为止的样子。

category.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

@Injectable()
export class CategoryService {
  constructor(private _http: Http) { }

  getCategories() {
    return this._http.get('api/categories.json')
      .map((response: Response) => response.json())
      .do(data => console.log('All; ' + JSON.stringify(data)))
      .catch(this.handleError);
  }

  private handleError(error: Response) {
    console.log(error);
    return Observable.throw(error.json().error || 'Server error');
  }
}

这是我注入它的 Category Menu 组件到目前为止的样子

import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../category.service';

@Component({
  selector: 'app-category-menu',
  templateUrl: './category-menu.component.html',
  styleUrls: ['./category-menu.component.css']
})
export class CategoryMenuComponent implements OnInit {
  errorMessage: string;
  commerceName= `El baratón`;
  categoryName = `Bebidas`;
  categories: any = 'Not assigned yet';
  hasMenu?= true;

  constructor(private _categoryService: CategoryService) { }


  ngOnInit() {
    return this._categoryService.getCategories()
      .subscribe(
        categories => this.categories = categories,
        error => this.errorMessage = error
      );
  }

}

现在，我在控制台中遇到的错误是 404。对于这个项目，我使用了 CLI 版本 1.0 和 src/api/categories.json 文件夹中的 categories.json 文件。

我在这里做错了什么？

Answer 1

将您的 api/categories.json 移动到 assets 文件夹，然后将 url 更改为

return this._http.get('/assets/api/categories.json')