Angular <select> 绑定到对象确认更改或恢复到以前的值

Question

我试图实现非常简单的<select>行为：如果用户取消更改，则恢复到以前的值。事实上，我成功了，但这花了我几个小时，而且我仍然对实施不满意，因为它不是那么明显和棘手。

所以，这是模板：

<select id="states" class="form-control" name="states" [ngModel]="selectedState"
        (ngModelChange)="onStateChange(selectedState, $event)">
    <option [ngValue]="null">All</option>
    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
</select>

和组件：

export class AppComponent {
  selectedState: State = null;

  states: State[] = [
    { name: 'Alabama', population: 100000 },
    { name: 'Alaska', population: 50000 }
  ];

  onStateChange(previousState: State, state: State): void {
    // If we're changing state from "All" to any, it's OK
    if (previousState === null) {
      this.selectedState = state;
      return;
    }
    // Otherwise we want the user to confirm that change
    if (confirm('Are you sure you want to select another state?')) {
      this.selectedState = state;
    } else {
      // But instead of just `this.selectedState = previousState;`
      // I need to proceed with below dirty hack.
      // Step 1: Changing property value, which is bound to `[ngModel]`,
      // to any, except for the current one, so `null` is OK
      this.selectedState = null;
      // Step 2: Reverting this property value to the previous one,
      // which is, ridiculously, already set as the previous one,
      // because we're reverting `this.selectedState`,
      // while passing exactly the same `this.selectedState`
      // to this method as a `previousState` parameter,
      // so we're actually doing `this.selectedState = this.selectedState;`,
      // but in not-so-obvious form.
      // This works only kind of asynchronously,
      // after call stack is clear.
      setTimeout(() => {
        this.selectedState = previousState;
      }, 0);
    }
  }
}

我希望这些评论是不言自明的，至少我试图这样写它们。

正如我在评论中已经提到的，简单的方法this.selectedState = previousState;不起作用，以及省略setTimeout(). 我也尝试过这个，但没有运气：

this.selectedState = previousState;
this.changeDetectorRef.detectChanges();

我的解决方案基于这个答案，是的，我也看到了这个，但它对我不起作用，因为我绑定<select>到一个对象，而不是标量值。

演示： https: //angular-hkaznb.stackblitz.io

封装版本：

角度：6.0.0

Answer 1

似乎我找到了更优雅的解决方案，它基于此答案。这个想法就是要操纵<select>的selectedIndex。所以，这是模板：

<form class="form-inline mt-3">
    <div class="container-fluid">
        <div class="row">
            <div class="form-group col-12">
                <label for="states" class="mr-3">State</label>
                <select #s id="states" class="form-control" name="states" [ngModel]="selectedState"
                        (ngModelChange)="onStateChange(selectedState, $event, s)">
                    <option [ngValue]="null">All</option>
                    <option *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>
                </select>
            </div>
        </div>
    </div>
</form>

和组件：

onStateChange(previousState: State, state: State, statesEl: HTMLSelectElement): void {
  // If we're changing state from "All" to any, it's OK
  if (previousState === null) {
    this.selectedState = state;
    return;
  }
  // Otherwise we want the user to confirm that change
  if (confirm('Are you sure you want to select another state?')) {
    this.selectedState = state;
  } else {
    statesEl.selectedIndex = this.states.indexOf(previousState) + 1;
  }
}

+1之所以需要，是因为null它是出来的this.states，同时也是各州<select>的第一<option>。

演示： https: //angular-rwnksz.stackblitz.io