【发布时间】：2017-11-13 11:59:20
【问题描述】：
我正在尝试在 Angular 2 中创建一个简单的应用程序来使用 Http 获取数据。 我创建了两个类employee-list 和employee-detail 以及一个名为 employee.service.ts 进行 Http 调用并接收 observable 并映射它。
我还在 src 中创建了一个名为 apidata 的文件夹，我在其中保存了要获取的数据 在employeedata.json 文件中。
然后订阅 observable 并将数据分配给视图中的局部变量。
我的代码编译成功。但是我无法获取数据。
下面是我的代码sn-ps
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Employee</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<app-root>Loading.....</app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http, Response} from '@angular/http';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list.component';
import { EmployeeDetailComponent } from './employee-detail.component';
import { EmployeeService } from './employee.service';
@NgModule({
declarations: [
AppComponent,
EmployeeListComponent,
EmployeeDetailComponent
],
imports: [ BrowserModule, HttpModule ],
providers: [EmployeeService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [EmployeeService]
})
export class AppComponent {
title = 'app';
}
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:justify-all;">
<h3>
Welcome to {{title}}!
</h3>
<h4> Random Company</h4>
<h4> ...........</h4>
<employee-list></employee-list>
<employee-detail></employee-detail>
employee-list.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';
@Component({
selector: 'employee-list',
template: `<h4>Employee List</h4>'
<ul *ngFor=" let employee of employees ">
<li>{{employee.name}}</li>
</ul>`
})
export class EmployeeListComponent implements OnInit{
employees = [];
constructor(private _employeeService:EmployeeService){}
ngOnInit(){
this._employeeService.getEmployees()
.subscribe(resEmployeeData => this.employees = resEmployeeData);
}
}
employee-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';
@Component({
selector: 'employee-detail',
template: `<h4>Employee Details</h4>'
<ul *ngFor=" let employee of employees ">
<li>{{employee.id}}.{{employee.name}}-{{employee.gender}}</li>
</ul>`
})
export class EmployeeDetailComponent implements OnInit{
employees = [];
constructor(private _employeeService:EmployeeService){}
ngOnInit(){
this.employees = this._employeeService.getEmployees();
}
}
employee.service.ts
import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class EmployeeService {
private _url: string = "apidata/employeedata.json"
constructor(private _http: Http){}
getEmployees(){
return this._http.get(this._url)
.map((response:Response) => response.json() );
}}
谁能告诉我我的申请中缺少什么。 为什么我的应用程序没有获取数据？
【问题讨论】：
-
您是否已注销从请求中返回的内容？您是否尝试在通话中添加标头？
-
你能在浏览器的网络标签中查看这个api返回什么吗？
-
我是 Angular 新手。我不太了解在通话中添加标头。请根据我的申请指导我。
-
@Deepak Jha.. 它只返回模板视图，但不从文件 employeedata.json 中获取数据
-
当我在“网络”选项卡上按 F5 时，employeedata.json 文件的状态为 404。
标签： angular