im struggeling with using a service in Angular.

I have the service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Project } from '../project';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  constructor(
    private http: HttpClient,
  ) { }



  getProjects() {

    this.http.get<Project[]>('/api/getprojects').subscribe((response) => {
      console.log(response);
      return response;
    })

  }
}

I use the service in the component Dashboard:

import { ThrowStmt } from '@angular/compiler';
import { Component, OnInit } from '@angular/core';
import { Project } from '../project';
import { ProjectService } from '../service/project.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(
    private projectService: ProjectService
  ) { }

  projects!: Project[];

  ngOnInit():void {
    this.getProjects();
  }

  getProjects(){
    this.projects = this.projectService.getProjects();
    return this.projects;
  }



}

But get this error:

Type 'void' is not assignable to type 'Project[]'.

27     this.projects = this.projectService.getProjects();

I tried some things and already noticed the Angular Tutorial of Heros, but was not able to solve it. May you help me?

CodePudding user response：

ProjectService (do not subscribe in your services)

 getProjects() {
    return this.http.get<Project[]>('/api/getprojects')
}

DashboardComponent

projects$ = this.projectService.getProjects();

And in your template you subscribe to the projects$ observable for example projects$|async

<div *ngFor="let project of projects$ | async)">{{project|json}}</div>

CodePudding user response：

Im not sure if im right, but it works :) At the moment the Dashboard Component looks like this

export class DashboardComponent implements OnInit {

  constructor(
    private projectService: ProjectService,
  ) { }

  projects!: Project[];

  public projects$ = this.projectService.getProjects();

  ngOnInit():void {
  }

  getProjects(){
    //this.projects = this.projectService.getProjects();
  }

}