Question

所以我有一个非常简单的场景，即在下拉列表更改时显示确认弹出窗口。如果用户选择取消，我需要将下拉值恢复为旧值。我认为我正确地做了，即使在DOM中，与select绑定的ngModel的值也在反映。但不知何故，它没有恢复显示中的选定值。这是我的代码

<select style="display: inline-block;width: 20%" class="form-control" 
  name="selectedClientVersion" 
  (change)="selectedCurrentVersion($event.target.value)" 
           [(ngModel)]="selectedClientVersion">
           <option *ngFor="let i of clientVersions" 
           [selected]="i == 'selectedClientVersion' ">{{i}}</option>
  </select>

selectedClientVersion='version1';
  prevSelectedClientVersion='version1';
  clientVersions=['version1', 'version2', 'version3'];
  selectedCurrentVersion(val){
    var r = confirm("Do you really want to chnage?");
    if (r == true) {
        this.prevSelectedClientVersion= this.selectedClientVersion= val;

    } else {
       this.selectedClientVersion=this.prevSelectedClientVersion;
       //return false;
    }
  }

P.S我也尝试ngModelChange代替change。更新：我已经在stackOverflow上搜索了类似的答案，发现没有任何一个场景处理这种情况，其中涉及确认弹出窗口并且必须根据Angular 2

UPDATE2：这就是我想要做的事情，尽管是角度2： Reset back to previous option on Select field if js Confirm returns false http://jsfiddle.net/CZ8F9/

Answer 1

我能想出的解决方案是创建先前选择的对象/值的引用，并在ngModelChange触发它时将其传递给函数。我不得不研究如何从组件中设置select的值。这是我的示例代码：

HTML：

<select #selectBox
            [(ngModel)]="selectedClientVersion" 
            (ngModelChange)="selectedCurrentVersion(prevSelectedClientVersion, selectedClientVersion, selectBox)" 
            (focus)="prevSelectedClientVersion=selectedClientVersion">
        <option *ngFor="let i of clientVersions" 
                [ngValue]="i"> 
          {{ i.value }}
        </option>
 </select>

component.ts：

selectedCurrentVersion(prevObj, currObj, selectbox){

    var r = confirm("Do you really want to change?");
    if (r == true) {
      this.selectedClientVersionObj = currObj;
    }
    else{
      selectbox.selectedIndex = this.clientVersions.indexOf(prevObj);
      this.selectedClientVersionObj = prevObj;
      this.selectedClientVersion = prevObj;
    }

}

Plunker demo

希望这会有所帮助：）

Answer 2

您应该使用空选项

<select [(ngModel)]="selectedValue">
    <option [ngValue]="''"></option>
      <option *ngFor="let value of values$ | async"
              [ngValue]="value">{{ value }}
      </option>
    </select>


reset(){
    this.selectedValue='';
  }

注意：如果未将选定项目分配给ngValue变量，则您未使用ngModel

<强> LIVE DEMO

ngModel中的Angular 2-更改未在下拉列表中反映

2 个答案: