根据从下拉菜单中选择的值显示/隐藏文本框或其他下拉列表或数据报警器

Question

嗨，我是angular2开发的新手，似乎找不到这个问题的解决方案:所以我正在开发的UI有一套5种选项。现在，在从第一个下拉菜单中选择任何一个选项时，我需要一个与第一个下拉菜单内联的辅助筛选器，以便输入某个字段，然后用户可以从选项1-选项5中添加进一步的筛选器。

因此，在从下拉菜单中选择选项-1时，我需要另一个下拉菜单过滤器(值为a，b，c)，或者如果选择选项-2，我们应该得到一个文本框来输入一些数据。如果输入选项-3，我们应该提供一个数据交换字段，供用户选择日期。这就是一般的想法.这就是UI的外观。

请帮助我输入哪些额外的代码才能使UI运行上述功能。我已将我在VSCode中输入的html代码和类型记录代码附在下面：

<h4>SE</h4>

<p>Filter By:</p>

<div class="dropdown">
  <select 
         *ngFor="let featureSet of featureSets; let i=index" 
         class="btn btn-default dropdown-toggle" 
         type="button" id="options"
         data-toggle="dropdown" 
         (change)="OnDropdownItemSelected($event.target.value,i)">

    <span class="caret"></span>
    <option 
           *ngFor="let feature of featureSet" 
           class="dropdown-menu-item" value="{{feature}}">
      {{feature}}
    <option>
 </select>

下面是我输入的打字本代码：

export class SE {

description = 'SE';


selections: string[];
isDisabled: boolean = true;
featureSets: any[]; //featureSets array stores data objects for all drop-downs.
items: any[];



constructor() {
    this.selections = [];
    this.featureSets = [];
    this.items = ['option-1', 'option-2', 'option-3', 'option-4', 'option-5'];
    this.addFeatures();
}


onAddClick() {

    this.addFeatures();

}

addFeatures() {
    this.featureSets.push(this.items);
    //this.featureSets.push() is adding an item set to the array each time the user clicks on the Add button.
}

public OnDropdownItemSelected(value: string, i: number) {

    //Enabling Add button upon selection.
    this.isDisabled = true;
    if (value != null && value != '') {
        this.isDisabled = false;
    }

}

}

帮助是非常需要和感激的。提前谢谢。

Answer 1

下面是一个如何实现此功能的示例：

public OnDropdownItemSelected(value: string) {
//Enabling Add button upon selection.
  this.isDisabled = true;
   if (value != null && value != '') {
    this.isDisabled = false;
    this.selected = value; //use selected in template
   }
}

然后在模板中：

<div *ngIf="selected === 'option-1'"> // here option one
</div>
<div *ngIf="selected === 'option-2'"> // here option two
</div>

编辑

首先，在组件范围上创建一个数组。

private optionsArray: any[] = [];
constructor() {

然后在这个数组中推送选定的值：

if (value != null && value != '') {
  this.isDisabled = false;
  this.optionsArray.push({name: value}); // push value into an array
}

现在在模板中：

<div *ngIf="optionsArray">
  <div *ngFor="let option of optionsArray">
    <span *ngIf="option.name === 'option-1'"> // here option one
    </span>
    <span *ngIf="option.name === 'option-2'"> // here option two
    </span>
    <span *ngIf="option.name === 'option-3'"> // here option three
    </span>
    // and more 
    // <div> will make a new row <span> stay on the same row.
  </div>
</div>