Issue in AngularJs2 Http Request : I am new to AngularJs, I am doing one simple application which is responsible to call the service and get the data from service and displaying it. I am not getting any error message in Developer Tools but data is not displaying properly. Thanks in Advance.

1. **app.module.ts** file

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    
    
    import { AppComponent } from './app.component';
    import { EmployeeComponent } from './employee/employe.component';
    import { EmployeeListComponent } from './employee/employeeList.component';
    import { EmployeeListPipe } from './employee/employeeList.pipe';
    import { EmployeeCount } from './employee/employeeCount.component';
    import { SimpleComponent } from './Others/simple.component';
    import { CommonModule } from '@angular/common';
    import { HttpModule } from '@angular/http';
    
    
    @NgModule({
      declarations: [AppComponent, EmployeeComponent, EmployeeListComponent, 
        EmployeeListPipe, EmployeeCount, SimpleComponent],
      imports: [BrowserModule, FormsModule, HttpModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

2. employee.service.ts file

    import { IEmployee } from './employee';
    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import { Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    
    @Injectable()
    export class EmployeeService {
      
      private _url: string = "./employeeData.json";
      constructor(private _http: Http) {  }
       
      getEmployee(): Observable<IEmployee[]> {
            
            return this._http.get('http://localhost:8085/AngularBackendService/rest/employees/findAll')
         .map( (response:Response)=> Array.of(response.json()));
        }
    }   

3. employeeList.component.ts file

    import {Component, Provider, OnInit} from '@angular/core';
    import { IEmployee } from './employee';
    import { EmployeeService } from './employee.service';
    
    @Component({
      selector: 'app-employeeList',
      templateUrl: 'employeeList.component.html',
      styleUrls: ['/employeeList.component.css'],
      providers: [EmployeeService]
    })
    
    export class EmployeeListComponent implements OnInit {
      employees: IEmployee[];
      
      selectedEmployeeCountRadioButton: string = 'All';
      statusMessage: string = 'Loading Data please wait...';
      
        constructor(private  _employeeService: EmployeeService) { }
     
      ngOnInit() {
       this._employeeService.getEmployee().subscribe(emp => this.employees = emp);
       console.log("Employees Count inside ngOnInit "+JSON.stringify(this.employees));
         }
      
      
      onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string): void {
          this.selectedEmployeeCountRadioButton = selectedRadioButtonValue;
      }
      getEmployeeSCount(): number {
        console.log("Employees Count inside getEmployeeSCount() "+JSON.stringify(this.employees));
            return this.employees.length;
      }
      getMaleEmployeeSCount(): number {
            return this.employees.filter(e => e.gender === 'Male').length;
      }
      getFemaleEmployeeSCount(): number {
            return this.employees.filter(e => e.gender === 'Female').length;
      }
    }

4. employeeList.component.html

    <html >
    <employee-count *ngIf = 'employees' [all] = "getEmployeeSCount()"
    				[male] = "getMaleEmployeeSCount()"
    				[female] = "getFemaleEmployeeSCount()"
    				(countRadioButtonSelectionChanged) = 'onEmployeeCountRadioButtonChange($event)'>
    </employee-count><br/>
    <table>
    		<thead>
    				<tr>	<th>Code</th>
    						<th>Name</th>
    						<th>Gender</th>
    						<th>Annual Salary</th>
    						<th>Date of Birth</th>  </tr>
    		</thead> <tbody>
    			<ng-container *ngFor="let employee of employees">
    				<tr  *ngIf="selectedEmployeeCountRadioButton =='All' || selectedEmployeeCountRadioButton==employee.gender">
    					<td>{{employee.code}}</td>
    					<td>{{employee.name}}</td>
    					<td>{{employee.gender}}</td>
    					<td>{{employee.annualSalary}}</td>
    					<td>{{employee.dateOfBirth}}</td>
    				</tr>
    				</ng-container>
    				<tr *ngIf="!employees">
    				<td colSpan="5">
    				{{statusMessage}}
    				</td>
    				</tr>
    				<tr *ngIf = "!employees || employees.length == 0" >
    				<td colspan="5">No Employee Details Present</td>
    				</tr>
    		</tbody>
    </table>
    
    </html>

5. I am getting below output

[Please Look for Output][1]


  [1]: https://i.stack.imgur.com/gXFOb.png



