How to access the particular element of array using *ngFor in Angular?

Question

I created a dropdown list component using the jQuery widget selectMenu. But then, I was hoping to use this component 3 times. Therefore, I created a model class for this dropdown as shown below.

export class Dropdown{
    short_value:string;
    price_value:string;
    config_text:string;
    optgrp_label:string;
}

export class DropdownList {
    dropdown_label: string;
}

Along with that, I created another class named as DropdownElements in which I hardcoded the values to be given to the elements of the Dropdown List as shown below.

import { Dropdown, DropdownList } from './dropdown.model';

export const DROPDOWN_LIST1: [DropdownList, Dropdown[]] = [
    { dropdown_label: 'Nominal Flow Rate' }, 
    [
        { short_value: 'A', price_value: '$1.00', config_text: 'Text1', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'B', price_value: '$2.00', config_text: 'Text2', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'C', price_value: '$3.00', config_text: 'Text3', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'D', price_value: '$4.00', config_text: 'Text4', optgrp_label: 'ADDITIONAL OPTIONS' },
        { short_value: 'E', price_value: '$5.00', config_text: 'Text5', optgrp_label: 'ADDITIONAL OPTIONS' },
        { short_value: 'F', price_value: '$6.00', config_text: 'Text6', optgrp_label: 'ADDITIONAL OPTIONS' }

    ]
];

export const DROPDOWN_LIST2: [DropdownList, Dropdown[]] = [
    { dropdown_label: 'Voltage' }, 
    [
        { short_value: 'P', price_value: '$10.00', config_text: 'Text10', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'S', price_value: '$40.00', config_text: 'Text40', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'Q', price_value: '$20.00', config_text: 'Text20', optgrp_label: 'STANDARD OPTIONS' },
        { short_value: 'R', price_value: '$30.00', config_text: 'Text30', optgrp_label: 'STANDARD OPTIONS' },
        { short_value: 'T', price_value: '$50.00', config_text: 'Text50', optgrp_label: 'ADDITIONAL OPTIONS' },
        { short_value: 'U', price_value: '$60.00', config_text: 'Text60', optgrp_label: 'ADDITIONAL OPTIONS' }
    ]
];

export const DROPDOWN_LIST3: [DropdownList, Dropdown[]] = [
    { dropdown_label: 'Termination' }, 
    [
        { short_value: 'G', price_value: '$100.00', config_text: 'Text100', optgrp_label: 'PREFERRED OPTIONS' },
        { short_value: 'H', price_value: '$400.00', config_text: 'Text400', optgrp_label: 'STANDARD OPTIONS' },
        { short_value: 'I', price_value: '$200.00', config_text: 'Text200', optgrp_label: 'STANDARD OPTIONS' },
        { short_value: 'J', price_value: '$300.00', config_text: 'Text300', optgrp_label: 'STANDARD OPTIONS' },
        { short_value: 'K', price_value: '$500.00', config_text: 'Text500', optgrp_label: 'ADDITIONAL OPTIONS' },
        { short_value: 'L', price_value: '$600.00', config_text: 'Text600', optgrp_label: 'ADDITIONAL OPTIONS' }
    ]
];


export const LIST_ARRAY: [[DropdownList, Dropdown[]]] = [DROPDOWN_LIST1, DROPDOWN_LIST2, DROPDOWN_LIST3];

Now, I imported this LIST_ARRAY in the dropdown.component.ts class and equate it to the instance variable of the DropdownComponent class by the name listArray. Next, I used this listArray in the dropdown.component.html to create 3 dropdown lists with the label as shown below.

<div *ngFor="let listElement of listsArray">
<label for="options" *ngFor="let item of listElement">{{item.dropdown_label}}: </label>

<select class="options">
    <optgroup *ngFor="let item of listElement;let num=index" label="{{item.optgrp_label}}">
        <option attr.data-short="{{item.short_value}}" attr.data-price="{{item.price_value}}" value="{{item.short_value}}">{{item.config_text}}</option>
    </optgroup>
</select>
</div>

Now, the problem was that all of the 3 labels were displayed along with the 3 dropdown lists, but the data inside all of those lists were not displayed. From what I observed, I found that I made a mistake accessing the array's elements and I don't know how to access it correctly so that I would be able to display the data inside the dropdown lists. Can anyone help?

For the options I think you're looking for <optgroup *ngFor="let option of item;let num=index" label="{{option.optgrp_label}}">, and similar for the {{item.short_value}} -> {{option.short_value}} etc. — Z. Bagley
– Z. Bagley, Commented Dec 19, 2017 at 16:59

JohnnyAW · Accepted Answer · 2017-12-19 17:19:09Z

1

Your problem is, that your second element of the array is an array itself, so you need to access it like this:

<div *ngFor="let listElement of listsArray">
    <label for="options">{{listElement[0].dropdown_label}}: </label>

    <select class="options">
        <optgroup *ngFor="let item of listElement[1];let num=index" label="{{item.optgrp_label}}">
            <option attr.data-short="{{item.short_value}}" attr.data-price="{{item.price_value}}" value="{{item.short_value}}">{{item.config_text}}</option>
        </optgroup>
    </select>
</div>

Same for the other arrays

edited Dec 19, 2017 at 17:19

answered Dec 19, 2017 at 17:11

JohnnyAW

2,8761 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access the particular element of array using *ngFor in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related