Angular HttpClientModule错误

Question

我正在开发我的第一个Angular应用程序并处理组件中的HttpClientModule并收到错误。

按照文档Angular -HttpClient我按照说明在app.module.ts中安装了HttpClientModule，然后在我的emails.component.ts中我有以下内容：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-emails',
  templateUrl: './emails.component.html',
  styleUrls: ['./emails.component.scss'],
  results: string[]
})

export class EmailsComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/api/email_list.json').subscribe(data => {
      this.results = data['results'];
    });
  }

}

在我的控制台中给出了以下错误：

ERROR in src/app/components/emails/emails.component.ts(7,3): error TS2345: Argument of type '{ selector: string; templateUrl: string; styleUrls: string[]; results: any; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'results' does not exist in type 'Component'.
src/app/components/emails/emails.component.ts(7,12): error TS2693: 'string' only refers to a type, but is being used as a value here.
src/app/components/emails/emails.component.ts(7,19): error TS1109: Expression expected.
src/app/components/emails/emails.component.ts(12,29): error TS2304: Cannot find name 'HttpClient'.
src/app/components/emails/emails.component.ts(16,12): error TS2339: Property 'results' does not exist on type 'EmailsComponent'.

app.module.ts：

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


import { AppComponent } from './app.component';
import { EmailsComponent } from './components/emails/emails.component';


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

Answer 1

在您的应用模块中，您忘了提供。

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


import { AppComponent } from './app.component';
import { EmailsComponent } from './components/emails/emails.component';


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

然后在你的组件中：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-emails',
  templateUrl: './emails.component.html',
  styleUrls: ['./emails.component.scss']
})

export class EmailsComponent implements OnInit {
  results: string[]

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('/api/email_list.json').subscribe(data => {
      this.results = data['results'];
    });
  }

}