带有angular5文本框的下拉菜单

Question

我是新手 angular 5. 我需要帮助来添加下拉菜单，当我 select 下拉菜单中的内容时，搜索框应该会显示。

这是文本框 code.I 需要将其放在下拉列表中，这样当我 select A 我需要获取 A 的搜索文本框。当我 select 模块应为模块显示相同的文本框。

<div class="col-sm-1">
    <label for="A">A:</label>
</div>
<div class="col-sm-3">
    <input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
    <button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
    <label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
    <input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
    <button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>

我想使用下拉菜单显示单个搜索文本框，而不是两个搜索文本框。

Answer 1

这是一个完成它的简短示例。（为简洁起见，我忽略了 bootstrap）

这是可能的，方法是将我的下拉值声明为一个名为 "searchOption" 的变量，然后将其用作每个搜索按钮的条件。

Select
<select [(ngModel)]="searchOption">
  <option value="A">A</option>
  <option value="module">module</option>
</select>

<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>

带有angular5文本框的下拉菜单

Dropdown menu with textbox in angular5

angular5