Jak poprawnie przekonwertować obiekt na JSON w Angular 2 za pomocą TypeScript

Question

Tworzę aplikację Angular 2 simple CRUD, która pozwala mi na produkty CRUD. Próbuję wdrożyć metodę postu, aby móc utworzyć produkt. Mój backend to ASP.NET Web API. Mam pewne problemy, ponieważ podczas przekształcania mojego obiektu Product na JSON, nie jest on wykonywany poprawnie. spodziewać JSON powinno być tak:

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

Jednak JSON wysłane z mojej aplikacji jest to:

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

Dlaczego jest dodanie „produkt” na początku JSON? Co mogę zrobić, aby to naprawić? Mój kod:

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> 

Answer 1

w twojej product.service.ts używasz metody stringify w niewłaściwy sposób ..

Wystarczy użyć

JSON.stringify(product) 

zamiast

JSON.stringify({product}) 

Sprawdziłem twój problem i po tym działa absolutnie dobrze.

Answer 2

Ponownie enkapsulujesz produkt. Starają się przekształcić go tak:

let body = JSON.stringify(product); 

Answer 3

Musisz przeanalizować ponownie, jeśli chcesz go w rzeczywistej JSON:

JSON.parse(JSON.stringify(object)) 

Answer 4

Jeśli jesteś zainteresowany wyłącznie wyprowadzania JSON gdzieś w kodzie HTML, można również użyć rury wewnątrz interpolacji. Na przykład:

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

nie jestem całkowicie pewien, że to działa na każde angularjs, ale działa doskonale w moim Ionic aplikacji (który używa kątowa 2).

Answer 5

let body = JSON.stringify(this.product);