Сервис не определен всякий раз, когда я пытаюсь вызвать метод из него

Question

Я следую за угловым курсом Джогеша Муппалы на Coursera, и я застрял в начале недели 4, где он использует HttpClient для связи с сервером.

Я точно следовал инструкциям, но его инструкции, похоже, нарушают мою программу. DishServices - это служба, которая извлекает данные с сервера и внедряется в один из компонентов, который вызывает службу для выполнения поиска. Однако всякий раз, когда этот вызов сделан, я ничего не получаю на странице, а это в консоли.

MenuComponent_Host.ngfactory.js? [см]: 1 ОШИБКА TypeError: Не удается прочитать свойство 'getDishes' из неопределенного в MenuComponent.push ../ src / app / menu / menu.component.ts.MenuComponent.ngOnInit (menu.component.ts: 18) at checkAndUpdateDirectiveInline (core.js: 9250) at checkAndUpdateNodeInline (core.js: 10514) в checkAndUpdateNode (core.js: 10476) at debugCheckAndUpdateNode (core.js: 11109) at debugCheckDirectivesFn (core.js: 11069) в Object.eval [as updateDirectives] (MenuComponent_Host.ngfactory.js? [sm]: 1) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 11061) в checkAndUpdateView (core.js: 10458) в callViewAction (core.js: 10699)

Как это бывает, я предпочитаю использовать более старый стиль написания провайдеров, и там обнаружена ошибка.

  providers: [{provide: DishService,                useValue: new DishService()},
          {provide: PromotionService,           useValue: new PromotionService()},
          {provide: ProcessHTTPMessageService,  useValue: new ProcessHTTPMessageService()},
          {provide: 'BaseURL',                  useValue: baseURL}
        ],

В DishService () есть ошибка, указывающая на неправильное количество аргументов. Когда я проверяю DishService,

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


   export class DishService {

  constructor(private http: HttpClient) {

   }

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

  }

}

В конструкторе есть HttpClient, который подразумевает, что ему требуется объект, подобный этому, для создания экземпляра. В руководстве не указывается предоставление нового HttpClient в поставщиках. Я попытался перейти на новый стиль записи поставщиков, с Injectable предоставлен в корне, но безуспешно.

РЕДАКТИРОВАТЬ: код из MenuComponent

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() {
    console.log("fkvjndf");
     this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
  }


}

EDIT:

Заменено

  providers: [{provide: DishService,                useValue: new DishService()},
          {provide: PromotionService,           useValue: new PromotionService()},
          {provide: ProcessHTTPMessageService,  useValue: new ProcessHTTPMessageService()},
          {provide: 'BaseURL',                  useValue: baseURL}
        ],  

С

  providers: [{provide: DishService},
          {provide: PromotionService},
          {provide: ProcessHTTPMessageService},
          {provide: 'BaseURL', useValue: baseURL}
        ],  

и добавлено

@Injectable({
  providedIn: 'root'
})

на DishService.ts

только чтобы получить то же сообщение об ошибке

MenuComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'getDishes' of undefined at MenuComponent.push../src/app/menu/menu.component.ts.MenuComponent.ngOnInit (menu.component.ts:18) at checkAndUpdateDirectiveInline (core.js:9250) at checkAndUpdateNodeInline (core.js:10514) at checkAndUpdateNode (core.js:10476) at debugCheckAndUpdateNode (core.js:11109) at debugCheckDirectivesFn (core.js:11069) at Object.eval [as updateDirectives] (MenuComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) at checkAndUpdateView (core.js:10458) at callViewAction (core.js:10699)

Answer 1

Я думаю, вам нужно добавить декоратор @Injectable () в ваш класс обслуживания, а также эти после этого кода ..

   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[]>{
    return this.http.get<Dish[]>(baseURL + 'dishes');

  }

}

Нет необходимости размещать эту услугу в настройках провайдера NgModule декоратора корневого модуля (например, app.module) из-за флага 'saidIn', и необходимо также добавить HttpClientModule в опции импорта декоратора NgModule. Надеюсь, это поможет.

Answer 2

Проблема в том, что вы определили параметр в конструкторе, но когда вы вызываете new DishService(), вы не передаете это значение. В общем, вы можете упростить раздел провайдеров и должны быть в состоянии решить вашу проблему в тот же ход.

providers: [
    DishService,
    PromotionService,,
    ProcessHTTPMessageService,
    {provide: 'BaseURL', useValue: baseURL}
],

Если вам не нужна какая-либо специальная конструкция для вашего провайдера, вы можете просто передать класс, и структура внедрения зависимостей позаботится о зависимостях за вас.

Я не понимаю, почему вы должны использовать the older style of writing providers, но если вы хотите сделать его более сложным, вам нужно использовать фабрику, как только вам потребуются зависимости. Но, как я понимаю, нет смысла делать это в вашем случае.