我使用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,并将其与名称为listArray
的DropdownComponent类的实例变量等同。接下来,我在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个下拉列表一起显示,但所有这些列表中的数据都没有显示。从我观察到的,我发现我在访问数组的元素时犯了一个错误,我不知道如何正确访问它,以便我能够在下拉列表中显示数据。有人可以帮忙吗?
答案 0 :(得分:1)
你的问题是,你的数组的第二个元素本身是一个数组,所以你需要像这样访问它:
<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>
其他数组相同