Comment faire pour convertir un objet en JSON correctement dans Angulaire 2 avec Tapuscrit

Je suis de la création d'un rapporteur d'angle 2 simple CRUD application qui me permet de CRUD produits. Je suis en train de mettre en œuvre la méthode post donc je peux créer un produit. Mon backend est un ASP.NET l'API Web. Je vais avoir quelques difficultés parce que lors de la transformation de mon Produit objet en JSON, il n'est pas fait correctement. L'
attendu JSON doit être comme ceci:

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

Cependant, le JSON envoyé à partir de mon application est-ce:

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

Pourquoi est-il ajout d'un "produit" dans le début du JSON? Que puis-je faire pour résoudre ce problème? Mon code:

produit.ts

export class Product {

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

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

de création de produit.composante.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>