angular - http在Angular中调用api失败

Question

有如下代码:

#home.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private http: HttpClientModule) {}
  id: number;
  private headers = new Headers({ 'Content-Type': 'application/json' });
  person = [];
  fetchData = function() {
    this.http
      .get('http://localhost:5555/person')
      .subscribe((res: Response) => {
        this.person = res;
      });
  };

  deleteProduct = function(id) {
    if (confirm('Are you sure?')) {
      const url = `${'http://localhost:5555/person'}/${id}`;
      return this.http
        .delete(url, { headers: this.headers })
        .toPromise()
        .then(() => {
          this.fetchData();
        });
    }
  };

  ngOnInit() {
    this.fetchData();
  }
}

当我加载此页面时，我在浏览器控制台中收到以下错误:

HomeComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.http.get is not a function
    at HomeComponent.fetchData (home.component.ts:16)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:35)
    at checkAndUpdateDirectiveInline (core.js:20644)
    at checkAndUpdateNodeInline (core.js:21908)
    at checkAndUpdateNode (core.js:21870)
    at debugCheckAndUpdateNode (core.js:22504)
    at debugCheckDirectivesFn (core.js:22464)
    at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:22456)
    at checkAndUpdateView (core.js:21852)

为什么 .get 在这里失败了？ vscode 没有对我尖叫。这是 Angular 的第 7 版。

Answer 1

你的构造函数参数应该来自 HttpClient 而不是 HttpClientModule,

将导入更改为，

import { HttpClient } from '@angular/common/http';

和构造函数，

constructor(private http: HttpClient) {}