![](/img/trans.png)
[英]ThreeJS returning undefined whenever I try to get a value from UserData
[英]Service s undefined whenever I try to call a method from it
我正在按照Jogesh Muppala在Coursera上进行的Angular课程学习,而我被困在第4周的开始,在那里他使用HttpClient与服务器进行通信。
我完全按照指示进行操作,但是他的指示似乎破坏了我的程序。 DishServices是一种从服务器检索数据的服务,并注入到其中一个组件中,后者调用该服务进行检索。 但是,无论何时打电话,我在页面上什么都没有,在控制台中什么也没有。
MenuComponent_Host.ngfactory.js? [sm]:1错误TypeError:无法在checkAndUpdateDirectiveInline(在MenuComponent.push ../ src / app / menu / menu.component.ts.MenuComponent.ngOnInit(menu.component.ts:18)处读取未定义的属性“ getDishes”分别在checkAndUpdateNodeInline(core.js:1014)在checkAndUpdateNode(core.js:10476)在debugCheckAndUpdateNode(core.js:11109)在debugCheckDirectivesFn(core.js:11069)在Object.eval [作为updateDirectives] (MenuComponent_Host.ngfactory.js?[sm]:1)在callViewAction(core.js:10699)在checkAndUpdateView(core.js:10458)在Object.debugUpdateDirectives [作为updateDirectives](core.js:11061)
碰巧的是,我更喜欢使用较旧的编写提供程序样式,这显示了那里的错误。
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。 我尝试使用root可提供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部分,并且应该能够以相同的方式解决问题。转。
providers: [
DishService,
PromotionService,,
ProcessHTTPMessageService,
{provide: 'BaseURL', useValue: baseURL}
],
如果您的提供程序不需要任何特殊的构造,则只需传入类,然后依赖项注入框架将为您处理依赖项。
我不明白为什么您应该使用the older style of writing providers
,但是如果要使其变得更复杂,则需要依赖项后就需要使用工厂。 但是据我所知,在您的情况下这样做毫无意义。
我认为您需要在服务类中以及在此代码之后添加@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。 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.