Question

我有一个名为header的选项列表，以显示在一个下拉列表中。我还有另一个列表table_settings['tags']，如果header的第i个元素是table_settings['tags']，我希望下拉列表中的'Num'的第i个元素。 / p>

当前我的代码是：

<div *ngIf="header">
    <select (change)-"selectTarget($event)">
        <option *ngFor="let option of header; let i=index" value="{{i}}">
            <ng-template *ngIf="table_settings['tags'][{{i}}]=='Num'">
                {{ option }}
            </ng-template>
        </option>
    </select>
</div>

但这会在控制台上引发各种错误

Answer 1

尝试这样：

*ngIf="table_settings['tags'][i]=='Num'"

Answer 2

<div *ngIf="header">
<select (change)-"selectTarget($event)">
    <option *ngFor="let option of header; let i=index" value="{{i}}">
        <ng-template *ngIf="table_settings['tags'][i]=='Num'">
            {{ option }}
        </ng-template>
    </option>
</select>

Answer 3

插值（{{}}）允许您将计算的值（字符串）合并到HTML元素标签和属性分配之间的文本中。就您而言，您不需要计算任何东西，因为您已经方便了i。

解决方案

<div *ngIf="header">
<select (change)-"selectTarget($event)">
    <option *ngFor="let option of header; let i=index" value="{{i}}">
        <ng-template *ngIf="table_settings['tags'][i]=='Num'">
            {{ option }}
        </ng-template>
    </option>
</select>

Answer 4

<div *ngIf="header">
    <select (change)-"selectTarget($event)">
        <ng-container *ngFor="let option of header; let i=index" value="{{i}}">
            <option *ngIf="table_settings['tags'][i]=='Num'">
                {{ option }}
            </option>
        </ng-container>
    </select>
<div>

如何在Angular中有条件地显示下拉选项？

4 个答案: