组件.ts 无法读取类名表单服务

Question

我有一个名为employee-service.service.ts的服务，它导出一个名为"EmployeeListComponent"的类

import { Injectable } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class EmployeeServiceService {
constructor(private http = HttpClient) { }
getEmployee(){
[
{'id':1,'name':'Gide', 'age':30},
{'id':2,'name':'Ivan', 'age':34},
{'id':3,'name':'Maylan', 'age':35},
{'id':4,'name':'pupa', 'age':36},
]
;
};
}

我想使用"component.ts"从我的服务中获取数组名称 getEmployee((

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
public employeer = [];
constructor( private employerservice = EmployeeServiceService) { }
ngOnInit(): void {
this.employeer = this.employerservice.getEmployee();
}

}

但是我得到错误....在我的命令行界面中 错误代码：

ERROR in src/app/employee-list/employee-list.component.ts:11:42 - error TS2304: Cannot find name 'EmployeeServiceService'.
11   constructor( private employerservice = EmployeeServiceService) { }
~~~~~~~~~~~~~~~~~~~~~~

当我尝试使用相同的过程使用 httpClient 时，同样的问题仍然存在 出现错误：

src/app/employee-service.service.ts：8：30 - 错误 TS2304：找不到名称"HttpClient"。

8   constructor(private http = HttpClient) { }
~~~~~~~~~~

我当然希望你能理解...请考虑我是安格拉尔的新手

Answer 1

对于依赖注入，您必须执行以下操作：

constructor(private httpClient: HttpClient) {}

必须使用:而不是=

参考角度导轨：https://angular.io/guide/dependency-injection

Answer 2

服务

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class EmployeeServiceService {
constructor(private http : HttpClient) { }
getEmployee() : void {
let array : Employee[] = [  -- Import Employee.ts accordingly
{'id':1,'name':'Gide', 'age':30},
{'id':2,'name':'Ivan', 'age':34},
{'id':3,'name':'Maylan', 'age':35},
{'id':4,'name':'pupa', 'age':36},
];
};
return array;
}

元件

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
public employeer:Employee[] = []; -- Import Employee.ts accordingly
constructor( private employerservice : EmployeeServiceService) { } --import accordingly
ngOnInit(): void {
this.employeer = this.employerservice.getEmployee();
}
}

接口

export interface Employee{
id : Number;
name : string;
age : string;
}

Answer 3

您必须在组件中导入服务。在构造函数中声明之前。

为此，您必须：

import { Component, OnInit } from '@angular/core';
import { EmployeeServiceService } from '../employeeserviceservice.service'; //add this line, import from correct folder
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
public employeer = [];
constructor( private employerservice = EmployeeServiceService) { }
ngOnInit(): void {
this.employeer = this.employerservice.getEmployee();
}

}