Javascript 角度HttpClientModule错误

我正在开发我的第一个Angular应用程序，并在我的组件中处理HttpClientModule，结果出错

根据文档，我按照说明在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 { }

---

您的组件应该是：
首先，您需要导入

HttpClient

第二个

结果：字符串[]

应该在

类中

而不是在装饰

组件中

就像我在这里做的那样：

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'];
    });
  }

}

---

请仔细阅读说明，说明您需要在忘记提供的应用程序模块中加载

HttpClient

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'];
    });
  }

}

---

显示你的

app.module.ts

，你也不能在

@Component

注释中有

results:string[]

，因为它不知道这是对的，你从不在

EmailsComponent

中定义字段

results

，你尝试将它作为参数传递给

@Component

装饰器。另外，您尝试使用

HttpClient

，而不实际导入它。这与

HttpClientModule

无关，您只是将字段定义放在了错误的位置，无法导入您尝试使用的内容。我强烈建议您阅读一些结构化的教程材料，例如@MikeTung I为我的app.module添加了代码。ts@MikeTung这也与模块定义无关；由于

HttpClient

标记不存在于该文件中，因此它没有检查模块中的依赖项。不，

HttpClientModule

将

HttpClient

定义为提供程序。此外，您实际上并不导入它。