Javascript 每当我试图从服务中调用方法时，它都是未定义的

我正在关注Jogesh Muppala在Coursera上的Angular课程，我被困在第4周的开始，他正在使用HttpClient与服务器通信

我完全按照指示行事，但他的指示似乎破坏了我的计划。DishServices是一个从服务器检索数据的服务，它被注入其中一个组件，该组件调用该服务进行检索。然而，每当调用时，我在页面上什么也得不到，在控制台中也没有

MenuComponent_Host.ngfactory.js？[sm]：1错误类型错误：无法读取 未定义的属性“GetDistrips” 在MenuComponent.push../src/app/menu/menu.component.ts.MenuComponent.ngonit 菜单.组件.ts:18 在checkAndUpdateDirectiveInline core.js:9250 在checkAndUpdateNodeLineCore.js:10514 在checkAndUpdateNode core.js:10476 在debugCheckAndUpdateNode core.js:11109 在debugCheckDirectivesFn core.js:11069 在Object.eval[as updateDirectives]菜单组件_Host.ngfactory.js？[sm]：1 在Object.debugUpdateDirectives[作为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有一个错误，说它有错误数量的参数。当我检查洗碗服务时

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

  }

}

编辑：

取代

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

与

并补充说

@Injectable({
  providedIn: 'root'
})

洗碗

只是为了得到相同的错误信息

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)

---

问题是您已经在构造函数中定义了一个参数，但是当您调用newdishservice时，您没有传入这个值。一般来说，您可以简化提供者部分，并且应该能够在同一轮中解决您的问题

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

如果您不需要为您的提供者提供任何特殊的构造，那么只需传入该类，依赖项注入框架就会为您处理这些依赖项

---

我不明白为什么要使用较旧的编写提供程序样式，但如果要使其更复杂，需要依赖项时，需要使用工厂。但在我看来，在您的情况下这样做没有任何意义。

我认为您需要在服务类中添加@Injectable decorator，并且在代码后面添加这些

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

  }

}

---

由于“providedIn”标志，无需将此服务放置在根模块的NgModule decorator的provider选项中，如：app.module，并且还必须在NgModule decorator的imports选项中添加HttpClientModule。希望这能有所帮助。

我们需要查看MenuComponent中的代码，您在其中尝试调用getDishesPlease重写您的问题：这不是关于向服务构造函数中注入参数，而是正如您所说的，关于您的服务未定义。我已经尝试过了，当我用根目录中提供的可注射的旧样式替换时，它没有任何帮助。也许你可以添加什么不起作用？你有没有遇到编译错误？运行时错误？错误消息是什么？

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

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

  }

}