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

Question

嗨，我对angular2的开发相对陌生，似乎找不到解决这个问题的方法：因此，我正在开发的UI有一个下拉列表，其中包含5个选项。现在，在从第一个下拉菜单中选择任何一个选项时，我需要一个与第一个下拉列表内联的同一选项的辅助过滤器来输入一些字段，然后用户才能从选项1-option5添加更多过滤器。

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

请帮助我键入哪些额外的代码，以便在UI中运行上述功能。我已经附上了我在下面的VSCode中输入的html代码和typescript代码：

<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>