Question

如何在模板中显示此json数据的line_donation数组中的meta_data的值？

下面是来自ngFor的json数据

  "line_items": [
        {
            "id": 1003,
            "name": "Fresh Mango- 1 kg",
            "product_id": 218,
            "variation_id": 0,
            "quantity": 1,
            "tax_class": "",
            "subtotal": "36.00",
            "subtotal_tax": "7.20",
            "total": "36.00",
            "total_tax": "7.20",
            "taxes": [
                {
                    "id": 1,
                    "total": "7.2",
                    "subtotal": "7.2"
                }
            ],
            "meta_data": [
                {
                    "id": 8873,
                    "key": "line_donation",
                    "value": "0"
                }
            ],
            "sku": "",
            "price": 36
        },

order-summary.html

 <div class="order-details">
            <ion-item no-lines>
                <ion-label class="side-header">{{"Order Details" | translate}} </ion-label>
            </ion-item>
            <div *ngFor="let item of orderSummary.line_items | keys">
                <ion-row>
                    <ion-col width-75>
                        <ion-label no-margin>{{item.value.name}} - ({{item.value.quantity}}) </ion-label>

                   <div *ngFor="let data of orderSummary.meta_data | keys">
                        <p> {{"Donation" | translate}}: {{1*data.meta_data.value | currency:values.currency:symbol:'1.2-2'}} </p>
              
                    </ion-col>
                    <ion-col width-25 text-right>
                        <ion-label no-margin>{{1*item.value.subtotal | currency:values.currency:symbol:'1.2-2' }} </ion-label>
                    </ion-col>
                </ion-row>
            </div>

我想访问嵌套在meta_data中的line_items数组中的值。我无法获取line_donation的值。

请帮助我解决问题。

Answer 1

使用line_items本地属性（即 item

）进行访问

<div class="order-details">
    <ion-item no-lines>
        <ion-label class="side-header">{{"Order Details" | translate}} </ion-label>
    </ion-item>
    <div *ngFor="let item of orderSummary.line_items | keys">
        <ion-row>
            <ion-col width-75>
                <ion-label no-margin>{{item.value.name}} - ({{item.value.quantity}}) </ion-label>

                <div *ngFor="let data of item.meta_data | keys">
                    <p> {{"Donation" | translate}}: {{1*data.value | currency:values.currency:symbol:'1.2-2'}} </p>

            </ion-col>
            <ion-col width-25 text-right>
                <ion-label no-margin>{{1*item.value.subtotal | currency:values.currency:symbol:'1.2-2' }} </ion-label>
            </ion-col>
        </ion-row>
    </div>
</div>

Answer 2

您可以使用line_items[0].meta_data[0].value;

进行访问

如果要在适当条件下访问此文件。

if(line_items[0].meta_data[0]){
   line_items[0].meta_data[0].value;
}

要在模板中访问

 <div class="order-details">
            <ion-item no-lines>
                <ion-label class="side-header">{{"Order Details" | translate}} </ion-label>
            </ion-item>
            <div *ngFor="let item of orderSummary.line_items">
                <ion-row>
                    <ion-col width-75>
                        <ion-label no-margin>{{item.value.name}} - ({{item.value.quantity}}) </ion-label>

                   <div *ngFor="let data of orderSummary.meta_data">
                        <p> {{"Donation" | translate}}: {{data.value | currency:values.currency:symbol:'1.2-2'}} </p>

                    </ion-col>
                    <ion-col width-25 text-right>
                        <ion-label no-margin>{{1*item.value.subtotal | currency:values.currency:symbol:'1.2-2' }} </ion-label>
                    </ion-col>
                </ion-row>
            </div>

在angular 5模板中访问或显示嵌套json数组的项目

2 个答案: