我有这个JSON:
{
"StatusCode": 0,
"StatusMessage": "OK",
"StatusDescription": [
{
"pharmacy_id": "011E752345553380ABC13FFA163ECD15",
"pharmacy_name": "Pharmacy",
"lastUpdated": "2019-12-03T11:15:26.510Z",
"products": [
{
"productID": "11AA016CBEFFE8B29B46E8393535C49F",
"quantity": 1,
"product_name": "BETADINE",
"price": 10
}
],
},
{
"pharmacy_id": "011E762345552280FBC13FFA163ECD10",
"pharmacy_name": "Test Pharmacy",
"lastUpdated": "2019-12-03T13:40:55.759Z",
"products": [
{
"productID": "11BA016CBEFFE8B29B46E8393445C49F",
"quantity": 4,
"product_name": "EUCARBON",
"price": 10
},
{
"productID": "11BA016CBEFFE8B29B46E8393532C49F",
"quantity": 2,
"product_name": "ALMACINE",
"price": 10
},
{
"productID": "22BA016CBEFFE8B29B46E8393555C49F",
"quantity": 2,
"product_name": "BUPRENORFIN",
"price": 10
}
],
},
.....
]
}
我想在视图中显示产品名称,数量,价格。
我使用以下代码从API获取所有数据:
public items: Receta;
getall() {
this.WS.history().subscribe(
items => {
this.items = items;
console.log('itemsssssssssssssss', items) // show JSON
console.log('itemsssssssssssssss.products', items.products) // show undefined
},
err => console.error('err', err),
() => console.log('error')
);
}
在html中,我只能显示pharmacy_name,我想显示每个药房的产品。
<StackLayout *ngFor="let item of items; let i = index;" padding="10">
<GridLayout columns="*" rows="auto" style="padding: 10%;">
<Label [text]="item .pharmacy_name" class="list-group-item-heading"
style="width: 60%; font-size: 14px; text-align: left;" row="0" col='0'
horizontalAlignment="left"></Label>
</GridLayout>
</StackLayout>
请,你能问我任何想法如何展示和展示产品吗?
console.log('itemsssssssssssssss.products', items.products) // show undefined
items
JSON中没有产品您需要执行类似的操作
const newItemsArray = []; items.StatusDescription.forEach((st) => { newItemsArray = newItemsArray.concat(st.products); })
现在,newItemsArray将包含所有产品。您可以使用rxjs
map
运算符返回此数组。或者您可以将newItemsArray作为类的公共成员,然后直接使用它。
<StackLayout *ngFor="let item of newItemsArray ; let i = index;" padding="10"> <GridLayout columns="*" rows="auto" style="padding: 10%;"> <Label [text]="item .pharmacy_name" class="list-group-item-heading" style="width: 60%; font-size: 14px; text-align: left;" row="0" col='0' horizontalAlignment="left"></Label> </GridLayout> </StackLayout>
要访问产品,您需要另一个ngFor像这样
<StackLayout *ngFor="let item of items; let i = index;" padding="10"> <GridLayout columns="*" rows="auto" style="padding: 10%;"> <Label *ngFor="let product of item.products; let i = index;" [text]="product.product_name" class="list-group-item-heading" style="width: 60%; font-size: 14px; text-align: left;" row="0" col='0' horizontalAlignment="left"></Label> </GridLayout> </StackLayout>