Angular Application не получает данные с сервера json

Question

Я пытаюсь получить данные с локального сервера, но ничего не происходит. Идея состоит в том, что он извлекается службой, которая передает обратно наблюдаемое, и любые компоненты, которым нужны данные, подписываются на наблюдаемое.

dish.service.ts

import {Dish} from '../shared/dish';
import {DISHES } from '../shared/dishes';
import {Observable, of} from 'rxjs';
import { delay } from 'rxjs/operators';

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class DishService {

  constructor(private http: HttpClient) {

   }

  getDishes(): Observable<Dish[]>{
    console.log("Hey");
    return this.http.get<Dish[]>(baseURL + 'dishes');

  }
}

menu.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import {DishService} from '../services/dish.service';

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

    dishes: Dish[];

  constructor(private dishService: DishService, @Inject('BaseURL') private BaseURL) { }

  ngOnInit() {
    (dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))
  }
 }

Он передает данные в menu.component.html, который прекрасно работал до добавления сервера, поэтому я знаю, что это не так. Вот что интересно: console.log («Эй») в первом примере кода не выполняется. Это как если бы метод dishSerivce.getDishes () даже не вызывался из MenuComponent. Я не знаю, как копать глубже, чем это. У кого-нибудь есть другие идеи?

Answer 1

Проблема в линии

(dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))

По сути, вы объявляете здесь функцию, не вызывая ее. Ваш код эквивалентен

ngOnInit(){
    function(dishService){
         return dishService.getDishes().subscribe(dishes => this.dishes = dishes);
    }
}

Рассмотрим следующий код, который фактически вызывает функцию, передавая this.dishService в качестве аргумента.

    (dishService => dishService.getDishes().subscribe(dishes => this.dishes = dishes))(this.dishService)

Сказав это, правильный подход будет

ngOnInit() {
   this.dishService.getDishes()
      .subscribe(dishes => this.dishes = dishes);
}

Answer 2

Должно быть так,

ngOnInit() {
     dishService.getDishes().subscribe(dishes => this.dishes = dishes))
  }