ngModel中的角度2更改未反映在下拉列表中

问题描述：

因此，我有一个非常简单的场景，其中有一个确认弹出窗口，显示在下拉更改中。如果用户选择取消，我需要将下拉值恢复为旧值。我认为我做得很对，甚至在DOM中，ngModel的值与select一起被反映出来。但不知何故，它不会恢复显示中的选定值。这里是我的代码ngModel中的角度2更改未反映在下拉列表中

<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我代替change试图ngModelChange了。更新：我已经搜索在计算器上类似的答案，并没有发现该情况的处理这种情况，那里的确认弹出的参与和值在Angular 2

基于将要恢复UPDATE2：这就是我想要做的，虽然在角2： Reset back to previous option on Select field if js Confirm returns false http://jsfiddle.net/CZ8F9/

@Aravind请仔细阅读和理解的问题小心。不要仅仅通过阅读标题来作出假设 –

从[selected] =“i =='selectedClientVersion'”'中删除来自'selectedClientVersion'的引号，并写为[[selected] =“i == selectedClientVersion”' – SaiUnique

I m抱歉。检查我的答案 – Aravind

答

的解决方案，我能想出是创建先前的参考选择对象/值，并在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

希望这有助于:)

谢谢这工作:)但是，只是想知道为什么我们仍然需要通过JavaScript来操纵DOM。在纯Angular2中处理会更好。不是吗？ –

我已经更新了传递DOM元素引用而不是使用'document'的答案，这是我能想到的最棱角分明的解决方案:) – Nehal

答

您应该使用一个空的选项

<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

如果您从外部按钮触发它，这很好。但是我必须通过改变方法 –

来使用'（ngModelChange）'事件来代替'（change）'。请参阅此[**答案**]（https://*.com/questions/44610183/angular-2-passing-data-into-a-for-loop/44610213#44610213） – Aravind

ngModel中的角度2更改未反映在下拉列表中

相关推荐