在 Angular 中使用 HTTP 获取数据

Question

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

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

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

员工-list.component.html

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

employee.service.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);
    }
}

员工-list.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" 添加到供应商数组

在 Angular 中使用 HTTP 获取数据

Fetch data using HTTP in Angular

html

web-services

typescript

angular