[在使用Nativeescript的JSON / OBJ内部时显示产品视图

Question

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

请，你能问我任何想法如何展示和展示产品吗？

Answer 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>