使用角度2中的Http获取数据-Java 学习之路

我试图在角度2中创建一个简单的应用程序来使用Http获取数据 . 我创建了两个类employee-list和employee-detail以及一个名为employee.service.ts的服务，该服务进行Http调用并接收observable并映射它 .

我还在src中创建了一个名为apidata的文件夹，在该文件夹中我保留了在employeedata.json文件中提取的数据 .

然后订阅observable并将数据分配给视图中的局部变量 .

我的代码编译成功 . 但我无法获取数据 .

下面显示的是我的代码片段

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

任何人都可以让我知道我的申请中缺少的是什么 . 为什么我的应用程序没有获取数据？

1 回答

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

员工detail.component.ts
```
<ul *ngFor=" let employee of employees | async">
```
回复于 2024-05-03T13:30:43+08:00

使用角度2中的Http获取数据