如何根据下拉选择显示或隐藏数据
How to show or hide the data based on dropdown selection
在我的 angular 应用程序中,我有一个下拉列表,下面是一些数据 div。
component.html
<select class="form-control" id="power" required>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<!--below code I have to show or hide-->
<div class="row">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
所以我的要求是,当我单击下拉列表中的任何项目时,我必须显示 div(在上面代码中的下拉列表之后)
谁能帮我解决这个问题。
您可以在 <select>
元素上定义一个模板变量(例如 #mySelect),然后使用它来确定所选值:mySelect.value
.
如果您需要显示 div 如果所选类别等于 'Habit',您可以尝试以下操作:
<!-- #mySelect is declared on <select> element -->
<select class="form-control" id="power" required #mySelect>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<div class="row" *ngIf="mySelect.value === 'Habits'">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
您可以在此处阅读有关 Angular 模板变量 的更多信息:
https://angular.io/guide/template-reference-variables
在我的 angular 应用程序中,我有一个下拉列表,下面是一些数据 div。
component.html
<select class="form-control" id="power" required>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<!--below code I have to show or hide-->
<div class="row">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
所以我的要求是,当我单击下拉列表中的任何项目时,我必须显示 div(在上面代码中的下拉列表之后)
谁能帮我解决这个问题。
您可以在 <select>
元素上定义一个模板变量(例如 #mySelect),然后使用它来确定所选值:mySelect.value
.
如果您需要显示 div 如果所选类别等于 'Habit',您可以尝试以下操作:
<!-- #mySelect is declared on <select> element -->
<select class="form-control" id="power" required #mySelect>
<option value="" disabled selected>Select a category</option>
<option *ngFor="let category of categoryNames">{{ category }}</option>
</select>
<div class="row" *ngIf="mySelect.value === 'Habits'">
<div class="col-sm-8">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
<div class="col-sm-4">
<p>Slect Habits</p>
<h5 class="formxp">Slect Items</h5>
</div>
</div>
您可以在此处阅读有关 Angular 模板变量 的更多信息: https://angular.io/guide/template-reference-variables