Angular 得到 http 响应

Question

Hello i am at trying to learn some Angular things. I am struggle with response of get from my api. I am using also a spring boot in java. Here is my service in 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');
    }
}

this is my model class:

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;
    }
}

and here is my component to list values:

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

}

I am getting error with such output:

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)

PS. I am using angular 9. Thank's for any help

Answer 1

There two ways you can inject your modules,

First one directly add into your service - providedIn: 'root' attribute

 import {HttpClient} from "@angular/common/http";
   import {Injectable} from "@angular/core";
   
    @Injectable({
       providedIn: 'root'
    })

    @Injectable()
    export class TaskService {
    
        constructor(private http: HttpClient) {
        }
    
        getTasks() {
            return this.http.get('/api/tasks');
        }
    }

Or you can add from src/app/app.module.ts

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

@NgModule({
  imports: [
    HttpClientModule
   ]
})

Answer 2

You can use promis:

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').toPromis();
    }
}

from you component you shall call:

public tasks = [];

ngOnInit(){
 this.loadTasks();
}

loadTasks() {
  this.taskService.getTasks().then((response) => {
    console.log(response);
    this.task = JSON.parse(JSON.stringify(response)); //if you server returns json data
}).catch((error) => {
  console.log(error);
});
}

From there you can adapt the tasks variable to your model.