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

Question

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

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

export class DropdownList {
    dropdown_label: string;
}

除此之外，我创建了另一个名为 DropdownElements 的 class，我在其中硬编码了要赋予下拉列表元素的值，如下所示。

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

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

    ]
];

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

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


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

现在，我在 dropdown.component.ts class 中导入了这个 LIST_ARRAY 并将其等同于名称为 listArray 的 DropdownComponent class 的实例变量.接下来，我使用 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 个下拉列表一起显示，但所有这些列表中的数据都没有显示。根据我的观察，我发现我在访问数组元素时犯了一个错误，我不知道如何正确访问它以便能够在下拉列表中显示数据。有人可以帮忙吗？

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

其他数组也一样

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

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

arrays

multidimensional-array

ngfor

angular