如何修复此消息角度可观察

Question

I have a little probleme, I use the node(express) and angular, I want display all classes in angular but it's show an error like this

and it's not show json of back-end, what is wrong I don't understand

Return of method http get clasRoutes.js

res.json({ success: true, classes: postQuery, total: nbClasses });

Clas.interface.ts

export interface Clas {
    room: string;
    img?: string;
}

Clas.service.ts

  private urlGetClasses = environment.url + 'classes';

  constructor( private http: HttpClient ) { }

   getClass(): Observable<Clas[]> {
        return this.http.get(this.urlGetClasses).pipe(map(a => console.log(a)));
  }

Clas.component.ts

public clas: Clas[] = [];

constructor(private clasService: ClasService) {}

ngOnInit() {
  this.getClass().subscribe(res => {
    this.clas = res.classes
  });
}

private getClass(): Observable < Clas[] > {
  return this.clasService.getClass().pipe(tap((value) => {
    console.log(value)
  }));
}  

Clas.component.html

<p *ngFor="let cla of clas">
   zefd {{cla.room}}
</p>

Answer 1

There is new RxJS syntax. You should write it as

  private getClass(): Observable<Clas[]> {
    return this.clasService.getClass().pipe(tap((value) => {console.log(value)}));
  }

make sure you import pipe and tap from rxjs .

Answer 2

The problem is with Clas.service.ts . In your getClass() method, you are mapping to void as the return type of console.log is void; ie you are returning void whereas you've specified the return type of getClas() is Observable<Clas[]> . Therefore, you need to change your getClas() method to:

getClass(): Observable<Clas[]> {
    return this.http.get(this.urlGetClasses);
}

Or as Nikola mentioned, you can use tap to log like so:

private getClass(): Observable<Clas[]> {
    return this.clasService.getClass().pipe(tap((value) => {console.log(value)}));
}