属性 'xxxService' 在类型 'xxxDetailsPage' 上不存在

Question

我创建了一个示例 ionic2 应用程序，我通过一个简单的网络获得了项目列表 api。当我单击某个项目的按钮时，我想查看一些详细信息，但我收到消息说该服务在我的详细信息页面类型上不存在。这是我的：

项目-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：

Property 'itemStockPositionService' does not exists on type '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());
    }

}

Answer 1

您在 itemStockPosit[i]onService 中有错字。 getStockPosition 函数中缺少 i。

属性 'xxxService' 在类型 'xxxDetailsPage' 上不存在

Property 'xxxService' does not exists on type 'xxxDetailsPage'

typescript

ionic-framework

ionic2

angular