Angular - 根据下拉列表值显示或隐藏

Question

我希望我的下拉列表根据所选值显示/隐藏 Div

我的 angular 项目中有一个下拉列表和几个 Div，如代码所示

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;">
                     <option value="predefined">Predefined</option>
                     <option value="opentype">Open Type</option>
                    </select>           
              </div>

Div1

                      <div class="col-md-12 no-padding">
                        <label>Application Name</label>
                        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                            Application Name is required! </span>
                      </div> 

Div2

                <div class="col-md-12 no-padding">
                  <label>Main Menu</label>
                  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
                </div>  

如果选定的值是预定义的，则 Div1 是可见的，而 Div2 是隐藏的，但如果它是 opentype，则 Div2 是可见的，而 Div1 是隐藏的。

默认情况下，Div1 值应该是 opentype 并且 Div2 应该是可见的

Answer 1

在这里，我在下拉列表中使用了ngModel，因此您可以获得从下拉列表中选择的值。

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" [(ngModel)]="optionValue">
                     <option value="predefined">Predefined</option>
                     <option value="opentype" selected>Open Type</option>
                    </select>           
</div>

在 Ts 文件中，您需要像这样声明一个名为 optionValue 的变量：

`optionValue`;

现在您可以使用ngIf来显示/隐藏 Div。

Div1

<ng-container *ngIf="optionValue == 'predefined'>
 <div class="col-md-12 no-padding">
                    <label>Application Name</label>
                    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                        Application Name is required! </span>
                  </div> 
</ng-container>

Div2

<ng-container *ngIf="optionValue == 'opentype'"
<div class="col-md-12 no-padding">
              <label>Main Menu</label>
              <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
            </div> 
</ng-container>