如何使用 TypeScript 在 Angular 2 中将对象正确转换为 JSON答案

【问题标题】：How to convert an object to JSON correctly in Angular 2 with TypeScript如何使用 TypeScript 在 Angular 2 中将对象正确转换为 JSON
【发布时间】：2016-11-17 05:58:11
【问题描述】：

我正在创建一个 Angular 2 简单的 CRUD 应用程序，它允许我对产品进行 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');
    }
}

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

创建产品.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>

【问题讨论】：

标签： json post typescript angular

【解决方案1】：

因为您再次封装产品。尝试像这样转换它：

let body = JSON.stringify(product);

【讨论】：

【解决方案2】：

在您的 product.service.ts 中，您以错误的方式使用 stringify 方法..

随便用

JSON.stringify(product)

而不是

JSON.stringify({product})

我已经检查了您的问题，在此之后它工作得非常好。

【讨论】：

谢谢，伙计！这几天你火了！感谢您的帮助。
感谢您的称赞，如果您有任何进一步的问题，请告诉我...我会在那里帮助您 :)
JSON.stringify(product) 和 .JSON.stringify({product}) 有什么区别
通过示例可以清楚地看到差异：- 假设 product = {'name':'laptop','price':2000} 那么，如果您执行 JSON.stringify(product)给出为 "{"name":"laptop","price":2000}" 但是如果你做 JSON.stringify({product}) 这给出了 "{"product":{"name":"laptop" ,"price":2000}}" 所以我希望这两者之间的区别很明显:)
不要只看标题，完整的问题请参考人家他们在做什么以及他们被击中的地方，以便我们帮助他们?

【解决方案3】：

如果你想在实际的 JSON 中再次解析：

JSON.parse(JSON.stringify(object))

【讨论】：

【解决方案4】：

如果您只对在 HTML 中的某处输出 JSON 感兴趣，您也可以在插值中使用管道。例如：

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

我不完全确定它适用于每个 AngularJS 版本，但它在我的 Ionic 应用程序（使用 Angular 2+）中完美运行。

【讨论】：

【解决方案5】：

在 Angular 9.0 中测试和工作

如果您使用 API 获取数据

array: [];

ngOnInit()    {
this.service.method()
.subscribe(
    data=>
  {
    this.array = JSON.parse(JSON.stringify(data.object));
  }
)

}

您可以使用该数组从 html 模板中的 API 数据打印结果。

喜欢

<p>{{array['something']}}</p>

【讨论】：