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

【问题标题】：Access or show item of nested json array in template in Angular 5在Angular 5的模板中访问或显示嵌套json数组的项目
【发布时间】：2020-01-02 07:20:30
【问题描述】：

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

下面是来自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>

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

【问题讨论】：

标签： html angular ionic3

【解决方案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>

【讨论】：

不工作。请检查响应。我不知道如何访问嵌套对象数组中的数组。

【解决方案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>

【讨论】：

不工作！请检查即将到来的模式响应。我的意思是嵌套在 line_items 数组对象中的数组。