Question

我是Angular的新手，我正在做一个简单的应用程序，负责调用服务并从服务中获取数据并显示它。我没有在Developer Tools中收到任何错误消息，但数据显示不正确。

app.module.ts文件

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 { }

employee.service.ts文件

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

employeeList.component.ts文件

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

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>

我的输出低于输出

Answer 1

根据您获得的数据，您需要使用*ngFor="let employee of employees[0].employees"

Angular Http请求中的问题

1 个答案: