Angular2 HTTP响应错误

时间:2017-07-02 14:50:19

标签: angular

我从json文件中获取数据时遇到了奇怪的问题。我不知道为什么它不起作用,我可以说有一件事是流行的“它之前有效”。我收到错误:GET http://localhost:4200/apidata/femaleModels.json 404(未找到)。有人可以看看我的代码,看看有什么不对,也许我忘记了什么?

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule  } from '@angular/http';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GalleryComponent } from './gallery/gallery.component';
import { TeamDemonstrationComponent } from  './gallery/teamDemonstration/teamDemonstration.component';
import { PersonalDemonstrationComponent } from './gallery/personalDemonstration/personalDemonstration.component';


@NgModule({
    declarations: [
        AppComponent,
        GalleryComponent,
        TeamDemonstrationComponent,
        PersonalDemonstrationComponent
    ],
    imports: [
        BrowserModule,
        HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

导出类AppModule {}

modelsService.ts:

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

@Injectable()
export class ModelsService {
private _femaleModelsUrl: string = "apidata/femaleModels.json";
private _maleModelsUrl: string = "apidata/maleModels.json";
private _premiumModelsUrl: string = "apidata/premiumModels.json";

constructor(private _http: Http) {}

    getFemaleModels() {
        return this._http.get(this._femaleModelsUrl)
            .map( (response: Response) => response.json() );
    }
}

gallery.component.ts

import { Component, EventEmitter, OnInit } from '@angular/core';

import { ModelsService } from './modelsService/models.service';

@Component({
    selector: 'app-gallery',
    templateUrl: './gallery.component.html',
    styleUrls: ['./gallery.component.scss'],
    providers: [ModelsService],
})
export class GalleryComponent implements OnInit {

    models: modelInterface[];
    demonstrationType: string = 'team';
    femaleModels: any;


    constructor(private _modelsService: ModelsService) {}
    ngOnInit() {
        this._modelsService
            .getFemaleModels()
            .subscribe( responseFemaleModelsData => this.femaleModels = responseFemaleModelsData );
    }
}


export interface modelInterface {
    name: string;
    height: number;
    size: string;
    hair: string;
    eyes: string;
    shoeSize: number;
    dateOfBirth: number;
    imgDir: string[];
}

文件树:

enter image description here

0 个答案:

没有答案