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

问题描述

所以我有一个非常简单的方案，在下拉菜单更改中会显示一个确认弹出窗口.如果用户选择取消，则需要将下拉列表值恢复为旧值.我认为我做得很好，即使在DOM中，与select绑定的ngModel的值也可以反映出来.但是不知何故，它不会还原显示的所选值.这是我的代码

So I have a very simple scenario where there's a confirmation popup to be shown on dropdown change. If the user chooses to cancel, I need to revert the dropdown value to old one. I think I'm doing correctly and even in the DOM, value of ngModel bound with select is reflecting. But somehow it's not reverting the selected value in display. Here's my code

<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

P.S I tried ngModelChange too in place of change.Update: I have already searched on stackOverflow for similar answer and found none of the scenario handles this case where there's an involvement of confirmation popup and the values have to be reverted based on that in Angular 2

UPDATE2:这是我想做的，尽管在角度2:重置为如果js Confirm返回false，请选择字段 http://jsfiddle.net/CZ8F9/

UPDATE2: This is what I want to do, albeit in angular 2:Reset back to previous option on Select field if js Confirm returns falsehttp://jsfiddle.net/CZ8F9/

推荐答案

我能想到的解决方案是创建先前选择的对象/值的引用，并在ngModelChange触发它时将其与函数一起传递.我不得不进行一些有关如何从组件设置select值的研究.这是我的示例代码:

The solution I could come up with is to create a reference of the previously selected object/value and pass it with the function when ngModelChange triggers it. I had to some research on how to set value for select from component. Here's my example code:

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:

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;
    }

}

柱塞演示

希望这会有所帮助:)

这篇关于ngModel中的Angular 2-更改未反映在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！