簡體   English   中英

每當我嘗試從服務中調用方法時,服務的狀態都未定義

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM