javascript - 每当我尝试从中调用方法时 Service 未定义
问题描述
我正在关注 Jogesh Muppala 在 Coursera 上的 Angular 课程,但我被困在第 4 周开始时,他正在使用 HttpClient 与服务器通信。
我完全按照说明进行了操作,但他的说明似乎破坏了我的程序。DishServices 是一种从服务器检索数据的服务,并被注入到其中一个组件中,该组件调用该服务来进行检索。但是,每当进行该调用时,页面上和控制台中都没有任何内容。
MenuComponent_Host.ngfactory.js?[sm]:1 错误类型错误:无法在 checkAndUpdateDirectiveInline ( core.js:9250) 在 checkAndUpdateNodeInline (core.js:10514) 在 checkAndUpdateNode (core.js:10476) 在 debugCheckAndUpdateNode (core.js:11109) 在 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);
}
}
编辑:
更换
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)
解决方案
问题是您在构造函数中定义了一个参数,但是当您调用时,new DishService()
您并没有传递这个值。通常,您可以简化您的提供程序部分,并且应该能够在同一回合解决您的问题。
providers: [
DishService,
PromotionService,,
ProcessHTTPMessageService,
{provide: 'BaseURL', useValue: baseURL}
],
如果您的提供者不需要任何特殊构造,您只需传入类,依赖注入框架就会为您处理依赖关系。
我不明白你为什么应该使用the older style of writing providers
,但如果你想让它更复杂,你需要使用工厂,一旦你需要依赖项。但正如我所见,在你的情况下这样做是没有意义的。
推荐阅读
- salesforce - Lightning Web 组件中的日期选择器输入
- spring - 在@query Jparepository 中访问 keycloak 主体
- javascript - 我正在尝试在 React.js 网站中添加路由,但它不起作用
- json - 使用 AJAX (JSONConvert Serialize) 的 MVC 日期参数始终为空
- reactjs - 使用 auth0-react 库的访问令牌似乎格式不正确
- r - 根据其他列中的唯一值将 NA 值替换为字符
- amazon-web-services - CloudWatch 警报根据历史数据恢复正常
- java - 是否可以在方法参数上应用手动实例化的 Java 注释?
- angular - 如何在故事书中为 Angular 应用加载全局 scss 文件?
- ruby-on-rails - Model.where('false') 是如何工作的?我不确定,上面的查询实际上在做什么