如何在Angular中使用* ngFor访问数组的特定元素？

我使用jQuery小部件selectMenu创建了一个下拉列表组件 . 但是，我希望能够使用这个组件3次 . 因此，我为此下拉列表创建了一个模型类，如下所示 .

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

export class DropdownList {
    dropdown_label: string;
}

与此同时，我创建了另一个名为DropdownElements的类，其中我硬编码了要提供给下拉列表元素的值，如下所示 .

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

现在，我在dropdown.component.ts类中导入了此LIST_ARRAY，并将其等同于DropdownComponent类的实例变量，名称为 listArray . 接下来，我在dropdown.component.html中使用了这个listArray来创建3个带有标签的下拉列表，如下所示 .

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

现在，问题是所有3个标签都与3个下拉列表一起显示，但所有这些列表中的数据都没有显示 . 从我观察到的，我发现我在访问数组的元素时犯了一个错误，我不知道如何正确访问它，以便我能够在下拉列表中显示数据 . 有人可以帮忙吗？