html - 在 Angular 中使用 HTTP 获取数据

Question

我是 Angular 和 Http 服务的新手。我创建了一个员工列表组件和一个名为 employee.service.ts 的服务，它进行了 Http 调用。我也正确地映射了 observable，

我还在 Assets 中创建了一个名为 employee.json 的 json 文件，用于存储我的数据。没有任何编译错误。但它在运行时失败。我收到以下错误。

NullInjectorError: R3InjectorError(AppModule)[EmployeeService -> EmployeeService -> EmployeeService]:

员工列表.component.html

<h2>Employee List</h2>
    <ul *ngFor="let employee of employees">
      <li>{{employee.name}}</li>
    </ul>

员工服务.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from '../employee';
import { Observable } from 'rxjs';

@Injectable() export class EmployeeService{

    private _url: string ="/assets/data/employee.json";

    constructor(private http:HttpClient) {}

    getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }
}

员工列表.component.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from '../employee';
import { Observable } from 'rxjs';

@Injectable() export class EmployeeService{

    private _url: string ="/assets/data/employee.json";

    constructor(private http:HttpClient) {}

    getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }
}

Answer 1

错误很明显。你应该在module.ts中提供employeeService

import employeeService 

并将“EmployeeService”添加到提供者数组中