Angular 获取 http 响应

你好，我正在尝试学习一些 Angular 的东西。我正在努力解决从我的 api 获取的响应。我也在java中使用spring boot。这是我的 angular 服务：

import {HttpClient} from "@angular/common/http";
import {Injectable} from "@angular/core";

@Injectable()
export class TaskService {

    constructor(private http: HttpClient) {
    }

    getTasks() {
        return this.http.get('/api/tasks');
    }
}

这是我的模型类：

export class Task {
    public id: number;
    public name: string;
    public completed: boolean;
    public dueDate: string;

    constructor(id: number, name: string, completed: boolean, dueDate: string) {
        this.id = id;
        this.name = name;
        this.completed = completed;
        this.dueDate = dueDate;
    }
}

这是我列出值的组件：

import { Component, OnInit } from '@angular/core';
import {Task} from "../task.model";
import {TaskService} from "../task.service";

@Component({
  selector: 'app-tasks-list',
  templateUrl: './tasks-list.component.html',
  styleUrls: ['./tasks-list.component.css']
})
export class TasksListComponent implements OnInit {

    tasks: Task[] = [];

  constructor(private taskService: TaskService) { }

  ngOnInit()  {
      return this.taskService.getTasks().subscribe(
          (tasks: any[]) => {
              this.tasks = tasks
          },
          (error) => console.log(error)
      )
  }

  getDueDateLabel(task:Task) {
      return task.completed ? 'badge-success' : 'badge-primary';
  }

  onTaskChange(event, task) {
      // this.taskService.saveTask(task, event.target.checked).subscribe();
      console.log('Task has changed');
  }

}

我收到这样的输出错误：

core.js:4442 ERROR NullInjectorError: R3InjectorError(AppModule)[TaskService -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (http://localhost:4200/vendor.js:11749:27)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at injectInjectorOnly (http://localhost:4200/vendor.js:11635:33)
    at Module.ɵɵinject (http://localhost:4200/vendor.js:11639:57)
    at Object.TaskService_Factory [as factory] (http://localhost:4200/main.js:251:138)
    at R3Injector.hydrate (http://localhost:4200/vendor.js:22036:35)
    at R3Injector.get (http://localhost:4200/vendor.js:21857:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:34997:33)
defaultErrorLogger @ core.js:4442
handleError @ core.js:4490
(anonymous) @ core.js:28164
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27431
(anonymous) @ core.js:28164
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27504
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27492
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28092
zUnb @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.js:11
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 NullInjectorError: R3InjectorError(AppModule)[TaskService -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (http://localhost:4200/vendor.js:11749:27)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at R3Injector.get (http://localhost:4200/vendor.js:21868:33)
    at injectInjectorOnly (http://localhost:4200/vendor.js:11635:33)
    at Module.ɵɵinject (http://localhost:4200/vendor.js:11639:57)
    at Object.TaskService_Factory [as factory] (http://localhost:4200/main.js:251:138)
    at R3Injector.hydrate (http://localhost:4200/vendor.js:22036:35)
    at R3Injector.get (http://localhost:4200/vendor.js:21857:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:34997:33)

附注。我正在使用 angular 9。感谢您的帮助