Получить доступ или показать элемент вложенного массива json в шаблоне angular 5

Question

Как я могу показать значение line_donation из meta_data массива данных JSON в моем шаблоне ???

ниже приведены данные json от ngFor

  "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
        },
        

порядка 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[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>

Answer 2

Доступ с помощью локального свойства 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>