我正在尝试显示一个列表,其中包含从本地 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');
}
}
这是我注入(inject)的类别菜单组件到目前为止的样子
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 文件。
我在这里做错了什么?
最佳答案
将您的api/categories.json
移动到assets文件夹,然后将url更改为
return this._http.get('/assets/api/categories.json')
关于javascript - 如何在 Angular 2+ 中获取 json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43444751/