html - Hämta data med HTTP i Angular


Jag är ny på Angular och Http-tjänsten. Jag skapade en employee-list-komponent och en tjänst med namnet employee.service.ts som gör ett Http-anrop. Jag har också mappat observabeln korrekt.

Jag skapar också en json-fil i assets med namnet employee.json där jag sparar mina data. Det finns inga kompileringsfel, men det misslyckas under körning. Jag får följande fel.

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

employee-list.component.html

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

anställd.tjänst.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);
    }
}

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

Svar #1

felet är ganska klart. du borde ha tillhandahållit employeeService i module.ts

import employeeService 

och lägg till "EmployeeService" i providers-arrayen