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());
}
}