如何在下拉列表中设置默认的第一项 - 角度2

Question

我的下拉列表包含操作ID列表和操作名称，如下所示。

{ id: 0, name: 'Select Operation' },
{ id: 1, name: 'Operation 1' },
{ id: 2, name: 'Operation 2' },
{ id: 3, name: 'Operation 3' },
{ id: 4, name: 'Operation 4' }

最初，用户可以在Web应用程序中看到“选择操作”选项。

在根据打开相应操作模型窗口的操作从下拉列表中选择操作之后，在关闭该窗口之后，用户应该看到“选择操作”，而不是先前选择的操作元素。基本上我是Angular的新手，并不知道如何实现这一目标。如有任何想法请帮助我实现这一目标。

这是我的HTML：

<div class="bx--row">
    <div class="bx--col-md-3"></div>

    <div class="bx--col-md-1">
        <select id="select-menu" class="bx--text-input" required name="actionSelection" (change)="onActionChange($event)"
            (dblclick)="onActionChange($event)">
            <option *ngFor="let action of actions" [value]="action.id">{{action.name}}</option>
        </select>

        <carbon-modal [modalId]="modalid" [modalTitle]="modaltitle" [isFull]="isFull">
            <div modal-body>
                <div *ngIf="Operation1">
                    <Operation1></Operation1>
                </div>
                <div *ngIf="Operation2">
                    <Operation2></Operation2>
                </div>
                <div *ngIf="Operation3">
                    <Operation3></Operation3>
                </div>
                <div *ngIf="Operation4">
                    <Operation4></Operation4>
                </div>
            </div>
        </carbon-modal>
    </div>
</div>

这是我的.ts与onActionChange方法：

showModal(modleidval, modaltitleval, isFull) {
    this.rowSelectionChange = true;
    this.isOpen = true;
    this.modalid = modleidval;
    this.modaltitle = modaltitleval;
    this.isFull = isFull;
    this.modalComponent.open(this.modalid);
}

onActionChange($event) {
    // alert($event.target.value);
    const selectedAction = parseInt($event.target.value);
    switch (selectedAction) {
        case 1: {
            this.showModal('Operation1', 'Customer Order - Manual Schedule', false);
            break;
        }
        case 2: {

            this.showModal('Operation2', 'Customer Order - Offload', false);
            break;
        }
        case 2: {

            this.showModal('Operation3', 'Customer Order - Offload', false);
            break;
        }
    }
}

Answer 1

在选择字段上使用ngModel

在模板中

<select id="select-menu" class="bx--text-input" required name="actionSelection" 
(change)="onActionChange($event)" [(ngModel)]="selectionValue" 
(dblclick)="onActionChange($event)">             
 <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
 </select>

在.ts文件中

onActionChange($event) {
 // alert($event.target.value);
    // your previous code
       this.selectionValue = 0;  //this will set the select field value to the default
   }

注意：selectedValue必须已声明为组件变量

Answer 2

当条件匹配[(ngModel)]="selectedOption"时，使用*ngIf="selectedOption==1"进行双向绑定和显示操作

Stackblitz

<div class="bx--col-md-1">
     <select id="select-menu" [(ngModel)]="selectedOption" class="bx--text-input" required name="actionSelection" (change)="onActionChange($event)" (dblclick)="onActionChange($event)">             
         <option  *ngFor="let action of actions"  [value]="action.id">{{action.name}}</option>
     </select>  

    <carbon-modal [modalId]= "modalid" [modalTitle]= "modaltitle" [isFull]="isFull" >
    <div modal-body>
    <div *ngIf="selectedOption==1">
        <Operation1></Operation1>   
    </div>
    <div *ngIf="selectedOption==2">
        <Operation2></Operation2>   
    </div>
    <div *ngIf="selectedOption==3">
        <Operation3></Operation3>       
    </div>
    <div *ngIf="selectedOption==4">
        <Operation4></Operation4>   
    </div>
  </div>

ts文件

selectedOption=0;

Answer 3

这可以通过使用[(ngModel)]来实现

ngmodel实现双向数据绑定

在HTML中

<select [(ngModel)]="selectedValue" (change)="onChange($event)">
  <option *ngFor="let action of actions" [ngValue]="action.id">{{action.name}}</option>
</select>

在ts

selectedValue : 0;



onchange(event){
console.log(event);
this.selectedvalue = event.value //your selcted value.
}

打开模态后，您可以将选定的值从下拉列表中分配给ts文件中的selectedValue变量，这样您就可以在视图中查看所选的值。