Question

您好我对angular2开发相对较新，似乎找不到解决此问题的方法：因此，我正在使用的UI有一个下拉列表，其中包含一组5个选项。现在，从第一个下拉菜单中选择任何一个选项，我需要一个辅助过滤器，用于内联第一个下拉列表以进入某个字段，然后用户可以从option1-option5添加更多过滤器。

所以当从下拉菜单中选择选项-1时，我需要另一个下拉菜单过滤内联（值为a，b，c），或者如果选择选项-2，我们应该得到一个文本框以输入一些数据。如果输入选项-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>

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

1 个答案: