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/

來源

2017-07-17 Rahul Dwivedi

@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

希望這有助於:)

來源

2017-07-17 13:17:36 Nehal

謝謝這工作:)但是，只是想知道爲什麼我們仍然需要通過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

來源

2017-07-17 11:07:01 Aravind

如果您從外部按鈕觸發它，這很好。但是我必須通過改變方法 –

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

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

回答

相關問題