使用Angular 2中的Http获取数据

Question

我正在尝试在angular 2中创建一个简单的应用程序，以使用Http获取数据。 我创建了两个类employee-list和employee-detail，以及一个名为employee.service.ts的服务，该服务进行Http调用并接收可观察对象并进行映射。

我还在src中创建了一个名为apidata的文件夹，其中将要提取的数据保存在employeedata.json文件中。

然后订阅可观察对象并将数据分配给视图中的局部变量。

我的代码已成功编译。但是我无法获取数据。

下面显示的是我的代码段

的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>

员工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);
}
}

员工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() );
}}

谁能让我知道我的申请表中缺少什么。 为什么我的应用程序不获取数据？

Answer 1

我认为您必须订阅可观察到的服务回报。 您可以在组件（observable.subscribe（））或模板中执行此操作：

员工detail.component.ts

<ul *ngFor=" let employee of employees | async">

使用Angular 2中的Http获取数据

问题描述

下面显示的是我的代码段

的index.html

app.module.ts

app.component.ts

app.component.html

员工list.component.ts

员工detail.component.ts

employee.service.ts

1 个解决方案

解决方案1
1 已采纳 2017-11-13 12:04:42

使用Angular 2中的Http获取数据

问题描述

下面显示的是我的代码段

的index.html

app.module.ts

app.component.ts

app.component.html

员工list.component.ts

员工detail.component.ts

employee.service.ts

1 个解决方案

解决方案1 1 已采纳 2017-11-13 12:04:42

解决方案1
1 已采纳 2017-11-13 12:04:42