Question

我是角色绑定的新手，通过youtube学习角度。本教程适用于angular2。我正在尝试提供服务并在其他课程中消费。但是当我运行我的项目时，我总是得到＆＃34;无法阅读财产＆＃39; GetEmployee＆＃39;未定义＆＃34; 以下是我的代码

以下是使用该服务创建员工对象并将其返回的服务。

  import { Injectable } from '@angular/core'
  import { IEmployee } from './employee'

 @Injectable()
export class EmployeeService 
{
GetEmployee():  IEmployee[]
 {

     return [
         { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 
     5500, dateOfBirth: '01/01/2010' },
         { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 
    5500, dateOfBirth: '01/01/2010' },
         { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 
      5500, dateOfBirth: '01/01/2010' },
         { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 
       5500, dateOfBirth: '01/01/2010' },
         { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 
   5500, dateOfBirth: '01/01/2010' }
     ];
  }
 }

在下面的代码中我试图使用服务

 import { Component } from '@angular/core'
 import { IEmployee } from './employee'
 import { EmployeeService } from './employee.service'

@Component
({
    selector: 'list-Employee',
    templateUrl: 'app/Employee/EmployeeList.component.html',
    styleUrls: ['app/Employee/EmployeeList.component.css'],
    providers: [EmployeeService]
})

export class EmployeeList {
selectedEmployeeCountRadioButton: string = 'All';
employees: IEmployee[];

private _emlployeeService: EmployeeService;

constructor(private _employeeService: EmployeeService) {
    this.employees = [
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
    ];
    alert(this._emlployeeService.GetEmployee());
    //  alert("asas")
    // this.employees=this._emlployeeService.GetEmployee();
}

getEmployee(): void {
    this.employees = [
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp01', name: 'Tom', gender: 'Male', annualSalary: 5500, dateOfBirth: '01/01/2010' },
        { code: 'emp08', name: 'Tomi', gender: 'FeMale', annualSalary: 5500, dateOfBirth: '01/01/2010' }
    ];
}
trackByEmpCode(empoyee: any): string {
    return empoyee.code;
}


onRadioButtonSelectionChanged(selectedPerson: string): void {
    this.selectedEmployeeCountRadioButton = selectedPerson;
    console.log("This " + this.selectedEmployeeCountRadioButton);

}
getTotalEmployeeCount(): number {
    return this.employees.length;
}
getTotalMaleEMployeeCount(): number {
    return this.employees.filter(e => e.gender == "Male").length;
}
getTotalFemaleEMployeeCount(): number {
    return this.employees.filter(e => e.gender == "FeMale").length;
}

}

Answer 1

删除构造函数上的private _emlployeeService: EmployeeService;。

通过执行constructor(private _employeeService: EmployeeService) {，您已经宣布_employeeService属性。

Answer 2

这里有两个问题。

首先是拼写错误_emlployeeService。

其次是：

在EmployeeList组件类中，您使用以下行声明了新的EmployeeService：

private _emlployeeService: EmployeeService;

这是不必要的，因为Angular的依赖注入已经为您提供了EmployeeService类的实例，您可以在构造函数中请求它：

constructor(private _employeeService: EmployeeService)

您声明自己的实例已声明，但未实例化，因此它是undefined。在调用GetEmployee方法的地方，正在使用未定义的EmployeeService。

我总是得到＆＃34;无法阅读财产＆＃39; GetEmployee＆＃39;未定义＆＃34;同时消耗角度服务

2 个答案: