使用 Nativeescript 在 JSON/OBJ 内部显示产品时答案

【问题标题】：show products in view when there are inside JSON/ OBJ using Nativeescript使用 Nativeescript 在 JSON/OBJ 内部显示产品时
【发布时间】：2020-03-30 07:16:14
【问题描述】：

我有这个 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>

请问，您能问我如何展示和查看产品吗？

【问题讨论】：

标签： json angular typescript object nativescript

【解决方案1】：

你的问题在这里：

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>

【讨论】：

我有这个public items: Receta; 当我像你说的那样写items = items.concat(st.products); 类型'Receta'.ts(2339) 上不存在属性'concat'
对不起，我使用了与现有对象相同的名称。
是的，但我想显示 pharmacy_name 和来自药房的产品，而不仅仅是产品。 console.log(newItemArray) 只显示产品
好的，您可以通过添加另一个 *ngFor 从初始结构访问产品，如更新的答案所示。