Angular2 - сбросить значение выбора после изменения пользователем

Question

У меня есть <select>, который пользователь может изменить. Первоначально он имеет значение, и когда пользователь меняет его, я должен запросить ее "are you sure"?, и в случае, если ответ НЕТ, измените значение <select> на предыдущее. <select> привязан к коллекции объектов, а не значений.

Лучшее, что я мог придумать до сих пор это:

• в HTML

<select [ngModel]="selectedObj" (ngModelChange)="onSelectedObjChanged($event)"> 
    <option *ngFor="let obj of availableObjs" [ngValue]="obj">{{whatever}}<option> 
</select> 

• в коде

onSelectedObjChanged(obj) { 
    if (prompt answer is no) { 
    let currentlySelectedObj = this.selectedObj; 
    this.selectedObj = null; 
    this.changeDetectorRef.detectChanges(); 
    this.selectedObj = currentlySelectedObj; 
    this.changeDetectorRef.detectChanges(); 
    } 
} 

Это работает, но уродливо. Почему я это делаю:

• , кажется, нет никакого способа, чтобы отменить выбор событие изменения в DOM
• когда onSelectedObjChanged называется и ответ «нет», мне нужно как-то пусть Угловая знать это должен обновить целевую привязку, то есть <select> ...
• ... однако я не могу просто установить this.selectedObj = this.selectedObj, поскольку значение не изменяется, и никаких изменений не обнаружено угловыми; Вот почему я поставил его в null и обратно ...
• ... Но даже этого недостаточно, мне нужно, чтобы вызвать changeDetectorRef.detectChanges() уведомить Угловая его

Я уверен, что это лучший и это был бы отличный способ сделать это, было бы здорово, если бы вы могли поделиться некоторыми идеями.

Спасибо!

Answer 1

Я использую $event.target.value вместо $ event. Я отправляю this.selectedObj = $event.target.value; и if failed изменение this.selectedObj = previousObject Мне не нужны какие-либо обнаружение изменений.

Answer 2

попробуйте this.selectedObj = obj.target.value;, а не выполните ваше состояние.

Answer 3

Вот как я это сделал:

HTML:

<select [(ngModel)]="option" 
     #selectModel="ngModel" 
     (ngModelChange)="optionChanged($event)"> 
    <option [ngValue]="null">PlaceHolder</option> 
    <option *ngFor="let o of options" [ngValue]="o">...</option> 
</select> 

компонентов:

@ViewChild('selectModel') private selectModel: NgModel; 

optionChanged($event) { 
    //logic 
    this.selectModel.reset(null); 
}