web-dev-qa-db-ja.com

TypeScriptでAngular 2でオブジェクトをJSONに正しく変換する方法

製品をCRUDできるAngular 2つのシンプルなCRUDアプリケーションを作成しています。私は製品を作成できるようにpostメソッドを実装しようとしています。私のバックエンドはASP.NET Web APIです。 ProductオブジェクトをJSONに変換するときに正しく実行されないため、問題が発生します。予想されるJSONは次のようになります。

{
  "ID": 1,
  "Name": "Laptop",
  "Price": 2000
}

ただし、私のアプリケーションから送信されるJSONは次のとおりです。

{  
   "product":{  
      "Name":"Laptop",
      "Price":2000
   }
}

JSONの先頭に「製品」を追加するのはなぜですか？これを修正するにはどうすればよいですか？私のコード：

product.ts

export class Product {

    constructor(
        public ID: number,
        public Name: string,
        public Price: number
    ) { }   
}

product.service.ts

import {Injectable}   from '@angular/core';
import {Http, Response} from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Observable';

import {Product} from './product';

@Injectable()
export class ProductService {

    private productsUrl = 'http://localhost:58875/api/products';

    constructor(private http: Http) { }

    getProducts(): Observable<Product[]> {
        return this.http.get(this.productsUrl)
            .map((response: Response) => <Product[]>response.json())
            .catch(this.handleError);
    }

    addProduct(product: Product) {                
        let body = JSON.stringify({ product });            
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.productsUrl, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || {};
    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server Error');
    }
}

create-product.component.ts

import { Component, OnInit }  from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { Product } from '../product'
import { ProductService } from '../product.service'

@Component({
    moduleId: module.id,
    selector: 'app-create-product',
    templateUrl: 'create-product.html',
    styleUrls: ['create-product.css'],
})
export class CreateProductComponent {

    product = new Product(undefined, '', undefined);
    errorMessage: string;

    constructor(private productService: ProductService) { }

    addProduct() {            
        if (!this.product) { return; }
        this.productService.addProduct(this.product)
            .subscribe(
            product => this.product,
            error => this.errorMessage = <any>error);
    }
}

create-product.html

<div class="container">
    <h1>Create Product</h1>
    <form (ngSubmit)="addProduct()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" required [(ngModel)]="product.Name" name="Name"  #name="ngModel">
        </div>
        <div class="form-group">
            <label for="Price">Price</label>
            <input type="text" class="form-control" required [(ngModel)]="product.Price" name="Price">
        </div>
        <button type="submit" class="btn btn-default" (click)="addProduct">Add Product</button>
    </form>
</div>
jsonposttypescriptangular
41
João Paiva

Product.service.tsで、間違った方法でstringifyメソッドを使用しています。

使うだけ

JSON.stringify(product)

の代わりに

JSON.stringify({product})

私はあなたの問題をチェックしましたが、この後はまったく問題なく動作します。

96
Akshay Rao

実際のJSONで必要な場合は、再度解析する必要があります。

JSON.parse(JSON.stringify(object))
22
Oded Breiner

HTMLのどこかにJSONを出力することにのみ関心がある場合は、補間内でパイプを使用することもできます。例えば：

<p> {{ product | json }} </p>

すべてのAngularJSバージョンで機能するかどうかは完全にはわかりませんが、Ionic App（Angular 2+を使用）で完全に機能します。

13
malvadao

製品を再びカプセル化しているからです。次のように変換してみてください：

let body = JSON.stringify(product);
8
rinukkusu