Angular2快遞航線http.get（API +：id）的調用將不會返回JSON

Question

我現在面臨的問題是，當我嘗試調用/通過

import {Injectable} from '@angular/core';  
import { Headers, Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import {Item} from "../models/item"; 

@Injectable() 
export class ItemService { 

    private ItemsUrl = 'api/Items'; // URL to web api 

    constructor(private http: Http) { } 

    getItems(): Promise<Item[]> { 
     return this.http.get(this.ItemsUrl) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

    getItem(id: string) { 
     return this.http.get(this.ItemsUrl + '/' + id) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

返回一個JSON對象，我收到一個錯誤消息 error message received from http.get request.

奇怪的是，如果我打電話給API請求項目的所有數據，它的工作原理？

return this.http.get(this.ItemsUrl) 

但如果我試圖通過_id調用特定的對象，我收到上述錯誤。

而且，我能夠訪問各個成員不同的API（聯繫人）

Contact.service.ts

import {Injectable} from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import {Contact} from "../models/contact"; 

@Injectable() 
export class ContactService { 

    private ContactsUrl = 'api/Contacts'; // URL to web api 

    constructor(private http: Http) { } 

    getContacts(): Promise<Contact[]> { 
     return this.http.get(this.ContactsUrl) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

    getContact(id: string) { 
     return this.http.get(this.ContactsUrl + '/' + id) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

研究這個問題後，我覺得角碼正確，我的問題與Express使用的路線有關。

Server.ts

import express = require('express'); 
    import BaseRoutes = require("./config/routes/Routes"); 
    import bodyParser = require("body-parser"); 

    import path = require('path'); 
    var port: number = process.env.PORT || 3000; 
    var env:string = process.env.NODE_ENV || 'developement'; 

    var app = express(); 

    app.set('port', port); 

    app.use('/app', express.static(path.resolve(__dirname, '../client/app'))); 
    app.use('/libs', express.static(path.resolve(__dirname, '../client/libs'))); 

    // for system.js to work. Can be removed if bundling. 
    app.use(express.static(path.resolve(__dirname, '../client'))); 
    app.use(express.static(path.resolve(__dirname, '../../node_modules'))); 

    app.use(bodyParser.json()); 
    app.use('/api', new BaseRoutes().routes); 

    var renderIndex = (req: express.Request, res: express.Response) => { 
     res.sendFile(path.resolve(__dirname, '../client/index.html')); 
    } 

    app.get('/*', renderIndex); 

    if(env === 'developement'){ 
     app.use(function(err, req: express.Request, res: express.Response, next: express.NextFunction) { 
      res.status(err.status || 500); 
      res.json({ 
       error: err, 
       message: err.message 
      }); 
     }); 
    } 

Routes.ts

import express = require('express'); 
import path = require('path'); 

import ContactRoutes = require('../routes/ContactRoutes'); 
import ItemRoutes = require('../routes/ItemRoutes'); 
var app = express(); 

class Routes { 

    get routes() { 
      app.use("/", new ItemRoutes().routes); 
      app.use("/", new ContactRoutes().routes); 


     return app; 
    } 
} 
export = Routes; 

項目，detail.component.html

<h1>Item</h1> 
<div *ngIf="item" class="form-horizontal"> 
    <h2>{{item.itemName}} - Item Details</h2> 

    <h3>{{item.rate}}- Basic Info</h3> 
    <div class="form-group"> 
     <div *ngIf="!newItem"> 
      <label class="col-sm-2 control-label">id: </label> 
      <div class="col-sm-10"> 
       {{item._id}} 
      </div> 
     </div> 
    </div> 

個ItemRoutes.ts

import express = require("express"); 
import ItemController = require("./../../controllers/ItemController"); 

var router = express.Router(); 
class ItemRoutes { 
    private _itemController: ItemController; 

    constructor() { 
     this._itemController = new ItemController(); 
    } 
    get routes() { 
     var controller = this._itemController; 

     router.get("/Items", controller.retrieve); 
     router.post("/Items", controller.create); 
     router.put("/Items/:_id", controller.update); 
     router.get("/Items/:_id", controller.findById); 
     router.delete("/Items/:_id", controller.delete); 

     return router; 
    } 


} 

Object.seal(ItemRoutes); 
export = ItemRoutes; 

Answer 1

我想同時使用，你必須parseInt函數（ID）id獲取。此外，我不知道分享itemRoutes代碼更清晰