角度基于从列表中动态选择的选项值显示或隐藏元素

编程问答 2022-06-08

问题描述

我有一个按角度排列的动态选择器列表，每个选择器都包含诸如名字，姓氏，性别，出生日期，地址之类的值

我已经尝试了

中给出的解决方案

Angular - Show or Hide based on Dropdown list value

但是使用此解决方案，当我更改下拉列表中的任何值时，它将影响每个下拉列表。对于前。我选择了“名字”，然后所有5个下拉列表都自动选择了“名字”，所以我无法使用此解决方案解决问题

我还有1种选择选择器日期格式，仅当用户选择“出生日期”时，我才想显示该格式，否则它将不会显示。

我已经尝试过[[ngModel）] =“ option”，但是它将适用于所有1次更改的选择器

如何根据记录值选择显示日期格式选择器。

例如-1，

在“第一个记录”下拉列表中，用户选择“姓氏”

在第二记录下拉菜单中，用户选择地址

在“第3条记录”下拉列表中，用户选择“名字”

在“第4条记录”下拉列表中，用户选择“出生日期”（在此位置仅应显示“日期格式”下拉列表）

在第五记录下拉列表中，用户选择性别

然后，对于ex.-1，我想仅在第4次选择时显示“日期格式”下拉元素，如果用户更改为其他值，则应该隐藏该

例如-2，

在“第一个记录”下拉列表中，用户选择“姓氏”

在第二记录下拉列表中，用户选择出生日期（在此位置仅应显示日期格式下拉列表）

在“第3条记录”下拉列表中，用户选择“名字”

在第4条记录下拉列表中，用户选择地址

在第五记录下拉列表中，用户选择性别

然后，对于ex.-2，如上所述，我只想在第二次选择时显示“日期格式”下拉元素，如果用户更改为其他值，则应该隐藏该

角度代码：

在ts文件中 

public records : string[] =  ['One','Two','Three','Four','Five'];
public dateFormats : string[] =  ['One','Five'];

在html文件中 

<div class="row" *ngFor="let rec of records; let i = index">

    <div class="col-lg-4">
        <select class="selectpicker" (change)="onDropdownChange($event,i);">
            <option value="" [selected]="true">Please Select Record</option>
            <option value="First_Name">First Name</option>
            <option value="Last_Name">Last Name</option>
            <option value="Birth_Date">Birth Date</option>
            <option value="Gender">Gender</option>
            <option value="Address">Address</option>
        </select>
    </div>
    
    <ng-container *ngIf="ifBirthDate">

        <div class="col-lg-4">
            <label>Select Date Format</label>
        </div>
        <div class="col-lg-4">
            <option *ngFor="let format of dateFormats" value="{{format}}">{{format}}</option>
        </div>

    </ng-container>
                            
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularbootstrap-selectpickerdropdowndropdowntypescripttypescripttypescript