github
1. import
/* employee.service.ts */
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http'; //import Http, Headers , Response
import {Observable} from 'rxjs/Observable'; //import Observable
import 'rxjs/add/operator/map'; //import rxjs map
import 'rxjs/add/operator/catch'; //import rxjs catch
import 'rxjs/add/Observable/throw';
@Injectable()
export class EmployeeService {
private _url: string = "../apidata/employeeData.json";
constructor(private _http: Http) {}
getEmployees(){
return this._http.get(this._url)
.map(res => res.json())
.catch(this._errorHandler); // catch error handler
}
_errorHandler(err: Response){
console.error(err);
return Observable.throw(err || "Server Error");
}
}
2.
/* employee-list.component.ts */
-------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
errorMsg: string;
constructor(private _empService: EmployeeService) { }
ngOnInit() {
// this.employees = this._empService.getEmployees();
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData,
resEmpError => this.errorMsg = resEmpError);
}
}
沒有留言:
張貼留言