Как правильно преобразовать объект в JSON в Angular 2 с помощью TypeScript
Я создаю Угловое 2 простое приложение CRUD, которое позволяет мне CRUD продукты. Я пытаюсь реализовать метод post, чтобы создать продукт. Мой бэкэнд-это ASP.NET Web API. У меня возникли проблемы, потому что при преобразовании моего объекта продукта в JSON он делает это неправильно. Этот ожидаемый JSON должен быть таким:
{
"ID": 1,
"Name": "Laptop",
"Price": 2000
}
однако JSON, отправленный из моего приложения, таков:
{
"product":{
"Name":"Laptop",
"Price":2000
}
}
почему он добавляет "продукт" в начале в JSON? Что я могу сделать, чтобы исправить это? Мой код:
продукта.ТС
export class Product {
constructor(
public ID: number,
public Name: string,
public Price: number
) { }
}
продукта.услуга.ТС
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');
}
}
создать продукт.деталь.ТС
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);
}
}
создать продукт.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>
5 ответов
в вашем продукте.услуга.ts вы неправильно используете метод stringify..
просто использовать
JSON.stringify(product)
вместо
JSON.stringify({product})
Я проверил вашу проблему и после этого он работает абсолютно нормально.
вам придется снова проанализировать, если вы хотите его в фактическом JSON:
JSON.parse(JSON.stringify(object))
потому что вы снова инкапсулируете продукт. Попробуйте преобразовать его так:
let body = JSON.stringify(product);
Если вас интересует только вывод JSON где-то в вашем HTML, вы также можете использовать канал внутри интерполяции. Например:
<p> {{ product | json }} </p>
Я не совсем уверен, что он работает для каждого AngularJS, но он отлично работает в моем ионном приложении (которое использует Angular 2).