我想将 .json 中的一些数据渲染到我的Angular2项目的组件视图中,但会立即出错。
releases.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ReleasesService {
constructor(private http: Http){ }
fetchData(){
return this.http.get('app/releases.json').map(
(res) => res.json());
}
}
释放-list.component.ts
import { Component, OnInit } from '@angular/core';
import { ReleasesService } from './releases.service';
@Component({
moduleId: module.id,
selector: 'releases-list',
templateUrl: 'releases-list.component.html',
providers: [ReleasesService]
})
export class ReleasesListComponent implements OnInit {
constructor (private releasesService: ReleasesService) {}
ngOnInit(){
this.releasesService.fetchData().subscribe(
(data) => console.log(data)
);
}
}
releases.component.html
<div class="releases-list-component">
<div>
<ul>
<li *ngFor="let release of releases">{{releases.name}}</li>
</ul>
</div>
</div>
在我的 releases.service.ts 文件中,我尝试更改
('app/releases.json')
到
('./releases.json')
或
('releases.json')
或
('/releases.json')
但尼克斯帮忙。
文件夹树:
-Project folder:
--app //app root
--releases //folder with service and component, etc
--releases.json //file in the app root
- index.html