獲取錯誤為“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) { }
}