Getting error as "NullInjectorError: StaticInjectorError(AppModule)[ContactService -> HttpHeaders]"

Question

我尝试了所有可能的解决方案，例如在 app.module.ts 中导入 HttpClientModule 以及搜索此错误消息时给出的所有建议，但没有解决我的问题。我是否遗漏了 .ts 文件中的任何设置。

//contact.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { Contact } from './contact';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ContactService {

  constructor(private http:HttpClient, headers:HttpHeaders) { }

  //retrewing contacts
  getContacts(){
    return this.http.get('http://localhost:3000/api/contacts')
    .pipe(map(res => res));    
  }

  // Adding contacts
  addContacts(newContact){
    var headers = new HttpHeaders();
    headers.append('Content-Type','application/json');
    return this.http.post('http://localhost:3000/api/add',newContact, {headers:headers})
    .pipe(map(res => res));  
  }

  //delete contacts
  deleteContacts(id){
      return this.http.delete('http://localhost:3000/api/delete'+id)
      .pipe(map(res => res));  
  }
}

我的contacts.component.ts

import { Component, OnInit } from '@angular/core';
import { ContactService } from '../contact.service';
import { Contact } from '../contact';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css'],
  providers: [ContactService]
})
export class ContactsComponent implements OnInit {
  contacts : any;
  contact : Contact;
  first_name : string;
  last_name : string;
  phone_no  : string;

  constructor(private contactService:ContactService) { }

  ngOnInit() {
    this.contactService.getContacts()
    .subscribe(contacts=>
      this.contacts = contacts);

  }

}

我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactsComponent } from './contacts/contacts.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

我已经在上面添加了httpclientmodule，但是仍然收到错误消息，我需要添加更多设置吗？

Answer 1

HttpHeaders 没有供应商。您不注入 HttpHeaders 的实例，您只是根据需要创建实例，您已经在这样做了。

您可以通过从 ContactService 构造函数中删除注入的 HttpHeaders 来解决此问题。

export class ContactService {
  constructor(private http:HttpClient) { }
}

Getting error as "NullInjectorError: StaticInjectorError(AppModule)[ContactService -> HttpHeaders]"

Getting error as "NullInjectorError: StaticInjectorError(AppModule)[ContactService -> HttpHeaders]"

api

http

angular-cli

angular