问我希望在用户从下拉菜单中选择第一个选项后，在我的页面上启用“添加”按钮。
EN

Stack Overflow用户

提问于 2017-10-15 21:38:58

回答 3查看 78关注 0票数 0

在我的页面上，用户必须首先从下拉菜单中选择一个选项。在选择任何选项时，应该启用"Add“和"Go”按钮，在单击"add“按钮时，必须允许用户输入除已选择的字段之外的另一个字段。请帮助我如何使用Angular2添加此功能。我在下面附上html和打字本代码。

过滤：

            <div class="dropdown">
                <select class="btn btn-default dropdown-toggle" type="button" id="options" data-toggle="dropdown">
             <span class="caret"></span>
                    <option *ngFor="let feature of features" class="dropdown-menu-item">
                        {{feature}}
                    <option>
                </select>
          <button type="button" class="btn btn-default disabled ">Add</button>
           <button type="button" class="btn btn-default disabled ">Go</button>

这样的打字本代码：

export class SE {

    description = 'SE';
    features: string[];



    constructor(){
        this.features = [
            'AL',
            'CP',
            'FI',
            'HD',
            'Se'
       ];



    }

以及当前指向静态页面的链接。在页面上，在选择了一个选项之后，应该启用按钮。“添加”按钮应该允许我们从一个更多的下拉菜单中选择选项，除了已经选择的菜单之外，还有一组选项作为先前的菜单。“开始”按钮应该允许用户提交他的条目。

html

angular

音视频体验馆免费体验试用

一站式·全方位体验音视频产品，所见即所得，30分钟即可上线同款能力

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-10-15 22:55:56

首先，您需要在下拉菜单中使用所有选项创建一个对象，并且应该创建这些对象的数组。(首先只有一个对象)然后，正如前面的答案所描述的，您可以在选择的时候启用按钮。单击add按钮后，应该向该数组添加另一个新的options对象。另一个保留选择的数组。这样就行了。(不过，我还没有测试过)。

<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> 
<button type="button" class="btn btn-default disabled " (click)='onAddClick()'>Add</button>

在组件ts中

export class SecurityExceptions {

    description = 'Security Exceptions';

    selections: string[];

    featureSets: any[];

    constructor(){
         this.selections=[];
         this.featureSets=[];
         this.addFeatures();
    } 
    onAddClick(){ 
    this.addFeatures(); 
    }

    addFeatures(){
    this.featureSets.push([
                    'Application',
                    'Cusip',
                    'Funds Impacted',
                    'Holdings Date',
                    'Security'
               ]);
    }

    OnDropdownItemSelected(value:string,i:number){ 
    if(this.selections[i]){
            this.selections[i]=value;
        } else{
        this.selections.push(value);
        }
    }

票数 0

Stack Overflow用户

发布于 2017-10-15 21:54:46

首先，在下拉列表中定义变更事件：

 <select class="btn btn-default dropdown-toggle" type="button" id="options" data-toggle="dropdown" (change)="OnDropdownItemSelected($event.target.value)">
         <span class="caret"></span>
                <option *ngFor="let feature of features" class="dropdown-menu-item" value="{{feature}}">
                    {{feature}}
                <option>
            </select>

然后，在组件级别检查值并根据需要启用和禁用按钮：

let isDisabled:boolean=true;

public OnDropdownItemSelected(value:any):void{
     this.isDisabled=true;
     if(value!=null && value!='')
     {
         this.isDisabled=false;
     }
}

关于按钮 set 启用/禁用条件

<button type="button" class="btn btn-default" [disabled]="isDisabled">Add</button>

或分配禁用类

<button type="button" class="btn btn-default" [ngClass]="isDisabled?'disabled':''">Add</button>

票数 0

Stack Overflow用户

发布于 2017-10-15 21:59:57

试试看这个

 <div class="dropdown">
                    <select #mydropdown class="btn btn-default dropdown-toggle" type="button" id="options" data-toggle="dropdown">
                 <span class="caret"></span>
    <option [ngValue]="0">Select</option>                                                                                 <option *ngFor="let feature of features" class="dropdown-menu-item">{{feature}}</option>
                    </select>
              <button type="button" [disabled]="mydropdown.value='0'" class="btn btn-default disabled ">Add</button>
               <button type="button" class="btn btn-default disabled ">Go</button>