Question

我正在按照Jogesh Muppala在Coursera上进行的Angular课程进行学习，而我被困在第4周初，在那里他正在使用HttpClient与服务器进行通信。

我完全遵循了说明，但是他的说明似乎破坏了我的程序。 DishServices是一种从服务器检索数据的服务，并注入到其中一个组件中，后者调用该服务进行检索。但是，无论何时打电话，我在页面上什么都没有，在控制台中什么也没有。

MenuComponent_Host.ngfactory.js？ [sm]：1错误，TypeError：无法读取未定义的属性“ getDishes” 在MenuComponent.push ../ src / app / menu / menu.component.ts.MenuComponent.ngOnInit （menu.component.ts：18）在checkAndUpdateDirectiveInline（core.js：9250）在checkAndUpdateNodeInline（core.js：10514）在checkAndUpdateNode（core.js：10476）在debugCheckAndUpdateNode（core.js：11109）在debugCheckDirectivesFn（core.js：11069）在Object.eval [作为updateDirectives]（MenuComponent_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（）发生错误，表示参数数量错误。当我检查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 includedIn root切换到新的编写提供程序样式，但是没有成功。

编辑：来自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);
  }


}

编辑：

已替换

  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

问题是您在构造函数中定义了一个参数，但是在调用public interface PerfMetricDetailsRepository extends JpaRepository<PerfMetricEntity, PerfMetricEntityId> { @Query("SELECT p FROM PerfMetricEntity p WHERE p.perfMetricId.period = :period") Page<PerfMetricEntity> findAllMetricTypeListByPeriod(@Param("period") int period,Pageable pageable); @Query("delete from PerfMetricEntity") Void DeleteAll(); }时，您没有传递该值。通常，您可以简化提供程序部分，并且应该能够解决您的问题。同时出现问题。

new DishService()

如果您的提供程序不需要任何特殊的构造，则只需传入类，然后依赖项注入框架将为您处理依赖项。

我不知道为什么要使用providers: [ DishService, PromotionService,, ProcessHTTPMessageService, {provide: 'BaseURL', useValue: baseURL} ],，但是如果要使其更复杂，则需要依赖项后，需要使用工厂。但据我所见，就您而言，这样做毫无意义。

Answer 2

我认为您需要在服务类中以及在此代码之后添加@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');

  }

}

由于'providedIn'标志，因此无需将此服务放置在根模块的NgModule装饰器的提供程序选项中（例如：app.module），并且还必须在NgModule装饰器的导入选项中添加HttpClientModule。希望这会有所帮助。

每当我尝试从服务中调用方法时，服务的状态都未定义

2 个答案: