我正在尝试在角度2中创建一个简单的应用程序来使用Http获取数据。 我创建了两个类employee-list和employee-detail以及一个名称为service的服务 employee.service.ts，它进行Http调用并接收observable并映射它。
我还在src中创建了一个名为apidata的文件夹，我在其中保存了我的数据 在employeedata.json文件中。
然后订阅observable并将数据分配给视图中的局部变量。
我的代码编译成功。但我无法获取数据。
<!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>
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 { }
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';
}
<!--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>
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);
}
}
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();
}
}
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() );
}}
任何人都可以让我知道我的申请中缺少的是什么。 为什么我的应用程序没有提取数据？
答案 0 :(得分：1)
我认为您必须订阅从您的服务返回的observable。 您可以在组件（observable.subscribe（））或模板中执行此操作：
雇员-detail.component.ts
<ul *ngFor=" let employee of employees | async">