根据从下拉菜单中选择的值显示/隐藏文本框或其他下拉菜单或日期选择器

Question

您好，我对 angular2 开发比较陌生，似乎无法找到解决此问题的方法： 所以我正在处理的 UI 有一个包含 5 个选项的下拉菜单。现在，在从第一个下拉菜单中选择任何一个选项时，我需要一个与第一个下拉菜单内联的相同选项的辅助过滤器以输入某个字段，然后用户才能从 option1-option5 添加更多过滤器。

所以在从下拉菜单中选择选项 1 时，我需要另一个下拉菜单过滤器内联（具有值 a、b、c），或者如果选择选项 2，我们应该在行中获得一个文本框来输入一些数据.如果输入了 option-3，我们应该提供一个 datepicker 字段供用户选择日期。这是大意。this is how the UI looks

请帮助我输入哪些额外的代码才能为 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>