将json数据渲染到Angular2中

时间:2016-12-28 21:15:26

标签: json http angular

我想将 .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')

但尼克斯帮忙。

控制台错误: enter image description here

文件夹树:

-Project folder:
--app //app root
--releases //folder with service and component, etc
--releases.json //file in the app root
- index.html

0 个答案:

没有答案