Question

我面临的问题是，当我尝试通过

调用/返回JSON对象时

datePicker.date = date!

我收到错误消息 error message received from http.get request.

奇怪的是，如果我打电话给api请求来自项目的所有数据，它是否有效？

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

但如果我尝试通过其_id调用特定对象，则会收到上述错误。

此外，我可以访问各个成员以获取不同的api（联系人）

Contact.service.ts

 return this.http.get(this.ItemsUrl)

在研究了这个问题后，我认为Angular代码是正确的，我的问题与Express使用的路径有关。

Server.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);
    }

Routes.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
            });
        });
    }

项-detail.component.html

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;

ItemRoutes.ts

<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>

Answer 1

我认为在使用id获取时你必须使用parseInt（id）。此外，我不确定分享itemRoutes代码是否更清晰

Angular2 Express路由http.get（api +：id）调用不会返回JSON

1 个答案: