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

我有一个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中，我只能显示药房名称，我想显示每个药房的名称和产品

   <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

您的

项目中没有产品

你需要这样做

const newItemsArray = [];
items.StatusDescription.forEach((st) => {
     newItemsArray = newItemsArray.concat(st.products);
})

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

现在，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>



要访问这些产品，您需要另一个类似这样的NGF

const newItemsArray = [];
items.StatusDescription.forEach((st) => {
     newItemsArray = newItemsArray.concat(st.products);
})

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


您的问题在于：

console.log('itemsssssssssssssss.products', items.products) // show undefined

您的
项目中没有产品

你需要这样做

const newItemsArray = [];
items.StatusDescription.forEach((st) => {
     newItemsArray = newItemsArray.concat(st.products);
})

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

现在，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>



要访问这些产品，您需要另一个类似这样的NGF

const newItemsArray = [];
items.StatusDescription.forEach((st) => {
     newItemsArray = newItemsArray.concat(st.products);
})

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


我有这个
公共物品：Receta当我像你说的那样写作时
items=items.concat（st.products）属性“concat”在类型“Receta”上不存在。ts（2339）很抱歉，我使用了与现有对象相同的名称。是的，但我要显示药房名称，以及来自药房的产品，而不仅仅是产品
console.log（newItemArray）
仅显示产品OK，您可以通过添加另一个
*ngFor
从初始结构访问产品，如更新的答案所示。我有这个
公共项：Receta当我像你说的那样写作时
items=items.concat（st.products）属性“concat”在类型“Receta”上不存在。ts（2339）很抱歉，我使用了与现有对象相同的名称。是的，但我要显示药房名称，以及来自药房的产品，而不仅仅是产品
console.log（newitemrarray）
仅显示产品ok，您可以通过添加另一个
*ngFor
从初始结构访问产品，如更新的答案所示。