2016-08-09 108 views
0

我已經創建了一個示例ionic2應用程序,我通過一個簡單的web api獲取項目列表。當我點擊某個項目的按鈕時,我想查看一些詳細信息,但是我收到消息,指出該服務在我的詳細信息頁面的類型上不存在。這是我有:類型'xxxDetailsPage'上不存在屬性'xxxService'

項目,list.ts

import {Component} from '@angular/core'; 
import {Item} from "../../model/item.model"; 
import { ItemService } from "../../service/item.service"; 
import { HTTP_PROVIDERS } from "@angular/http"; 
import {NavController, NavParams} from 'ionic-angular'; 
import {ItemDetailsPage} from '../item-details/item-details'; 

@Component({ 
    templateUrl: 'build/pages/item-list/item-list.html', 
    providers: [ItemService, HTTP_PROVIDERS] 
}) 

export class ItemListPage { 
    items:Item[] = []; 

    constructor(private itemService:ItemService, public 

navCtrl:NavController, navParams: NavParams) 

    { 

     this.getItems();  
    } 

    getItems() 
    { 
     this.itemService.getItems() 
      .subscribe(
       itemData => this.items = itemData, 
       err => console.log(err), 
       () => console.log('Items ophalen compleet.') 
      ) 
    } 

    itemTapped(event, itemCode) { 
     this.navCtrl.push(ItemDetailsPage, { 
      itemCode: itemCode 
     }); 
    } 
} 

爲了得到一個項目的細節,我點擊了一個觸發itemTapped按鈕:

項目-list.html

<ion-header> 
    <ion-navbar> 
     <button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>Artikelen</ion-title> 
    </ion-navbar> 
</ion-header> 

在我details-page我有下面的代碼:

項目-details.ts

import {Component} from '@angular/core'; 
import {Item} from "../../model/item.model"; 
import {NavController, NavParams} from 'ionic-angular'; 
import {ItemStockPosition} from "../../model/itemStockPosition.model"; 
import { ItemStockPositionService } 

from "../../service/itemStockPosition.service"; 

import { HTTP_PROVIDERS } from "@angular/http"; 


@Component({ 
    templateUrl: 'build/pages/item-details/item-details.html', 
    providers: [ItemStockPositionService, HTTP_PROVIDERS] 
}) 

export class ItemDetailsPage { 
    //selectedItem: string; 
    stockPositions: ItemStockPosition[] = []; 

    constructor(private itemStockPositionService:ItemStockPositionService, public navCtrl: NavController, navParams: NavParams) { 
    this.getStockPosition(navParams.get('itemCode')); 

    } 
    getStockPosition(itemCode){ 
     this.itemStockPositonService.getStock(itemCode) 
     .subscribe(
      stockData => this.stockPositions = stockData, 
      err => console.log(err), 
      () => console.log('Items ophalen compleet.') 
     ) 
    } 

} 

item-details.ts,系統給出this.itemStockPositionService錯誤:

住宅 'itemStockPositionService' 不存在於 型 'ItemDetailsPage'

ItemStockPositionService看上去是這樣的:

import { Injectable } from '@angular/core'; 
import { ItemStockPosition } from '../model/itemStockPosition.model'; 
import { Http } from '@angular/http'; 
import 'rxjs/Rx'; 

const makeUrl = (itemCode) => 

`http://desktopnnc10c9/BasiqInventory/api/item/GetItemStock/${itemCode}`; 


@Injectable() 

export class ItemStockPositionService{ 
    constructor(private http:Http){ 

    } 

    // retourneer alle items 
    getStock(itemCode){ 

     return this.http.get(makeUrl(itemCode)) 
      .map(res => <ItemStockPosition[]> res.json()); 
    } 

} 

回答

3

您在itemStockPosit [i] onService中有錯字。 我失蹤了getStockPosition函數。

相關問題