时间戳

首页 > 解决方案 > 在 Angular 中使用 HTTP 获取数据

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

问题描述

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

我还在资产中创建了一个名为 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);
    }
}

标签： htmlangulartypescriptweb-services

解决方案

错误很清楚。您应该必须在 module.ts 中提供employeeService

import employeeService

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

推荐阅读