如何根据下拉选择显示或隐藏数据

Question

在我的 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（在上面代码中的下拉列表之后）

谁能帮我解决这个问题。

Answer 1

您可以在 <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

如何根据下拉选择显示或隐藏数据

How to show or hide the data based on dropdown selection

javascript

html

angular

typescript

angular-ng-if