我有一个返回此Json的端点:
{
"result": [
{
"id": 1,
"name": "Kayak",
"category": "Watersports",
"description": "A boat for one person",
"price": 27500,
"currencyCode": "EUR"
},
{
"id": 2,
"name": "Lifejacket",
"category": "Watersports",
"description": "Protective and fashionable",
"price": 48095,
"currencyCode": "EUR"
},
{
"id": 3,
"name": "Soccer Ball",
"category": "Soccer",
"description": "FIFA-approved size and weight",
"price": 1950,
"currencyCode": "EUR"
}
]
}
我有一个叫Product
Angular的类:
import { Money, Currencies } from 'ts-money';
export class Product {
private money: Money;
public Amount = this.money.amount;
public constructor(
public Id: number,
public Name: string,
public Category: string,
public Price: number,
public Description: string,
public CurrencyCode: string) {
this.money = new Money(Price, CurrencyCode);
}
public GetPrice(): Money {
return this.money;
}
}
我在Angular中编写了以下代码:
export class ProductComponent implements OnInit {
constructor(private datasource: ProductDataSource) {
}
private products: Product[];
ngOnInit(): void {
this.datasource.GetProducts()
.subscribe((data) => {
this.products = data;
});
}
}
}
此代码成功返回一个JSON对象数组,这些对象具有与相同的属性Product
。现在,当我订阅这个可观察的内容时:
this.datasource.GetProducts()
.subscribe((data) => {
// this.products is a class property of type Product[]
this.products = data; // How do I make this work?
});
我不知道如何进行从JSON对象到Angular类的转换。我的HTML页面无法识别this.products
为Product
对象数组。我该怎么办?
Product
属性名称和json属性名称不匹配。您可以这样做:
this.datasource.GetProducts()
.subscribe((data) => {
// this.products is a class property of type Product[]
this.products = (data || []).map(item => new Product(item.id, item.name, item.category, item.price, item.description, item.currencyCode))
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句