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被调用且答案是＆＃34; no＆＃34;时，我需要以某种方式让角知道它必须刷新绑定目标，即<select> ... < / LI>
...但是我不能简单地设置this.selectedObj = this.selectedObj，因为值没有变化，并且角度没有检测到变化;这就是为什么我将其设置为null并返回...
...即使这还不够，我需要调用changeDetectorRef.detectChanges()通知角度

我确信有一种更好，更简单的方法可以做到这一点，如果你能分享一些想法会很棒。

谢谢！

Answer 1

我是这样做的：

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

Answer 2

我使用$event.target.value代替$ event。我发送this.selectedObj = $event.target.value;和if failed更改this.selectedObj = previousObject我不需要任何更改检测。

Answer 3

尝试this.selectedObj = obj.target.value;而不是执行你的条件。

Angular2 - 在用户更改后重置select的值

3 个答案: