Zugriff auf das bestimmte Array-Element mit * ngFor in Angular?

Question

Ich habe eine Dropdown-Listenkomponente mit dem jQuery-Widget selectMenu erstellt. Aber dann hatte ich gehofft, diese Komponente 3 mal zu benutzen. Daher habe ich eine Modellklasse für dieses Dropdown erstellt, wie unten gezeigt.

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

export class DropdownList { 
    dropdown_label: string; 
} 

Zusammen mit dem habe ich eine andere Klasse mit dem Namen als DropdownElements, in dem ich die Werte fest einprogrammiert zu den Elementen der Dropdown-Liste gegeben werden, wie unten gezeigt.

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

Nun importierte ich diese LIST_ARRAY in der dropdown.component.ts Klasse und setze es auf die Instanzvariable der DropdownComponent Klasse mit dem Namen listArray. Als Nächstes habe ich dieses listArray in dropdown.component.html verwendet, um 3 Dropdown-Listen mit dem Label zu erstellen, wie unten gezeigt.

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

Nun war das Problem, dass alle 3 Etikett zusammen mit den drei Dropdown-Listen angezeigt wurden, aber die Daten innerhalb aller dieser Listen wurden nicht angezeigt. Nach dem, was ich beobachtet habe, habe ich einen Fehler beim Zugriff auf die Elemente des Arrays gemacht und ich weiß nicht, wie ich richtig darauf zugreifen soll, damit ich die Daten in den Dropdown-Listen anzeigen kann. Kann jemand helfen?

Answer 1

Ihr Problem ist, dass Ihr zweites Element des Arrays ist selbst ein Array, so dass Sie es so zugreifen müssen:

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

Das Gleiche gilt für die anderen Arrays