Angular 9 : html select 确实尊重模型中点击后的价值

Question

我正在实现一个组件，当用户 select 的值来自 HTML select 时，要求用户确认他的选择。如果用户 select 不，我想恢复到旧值。恢复有效并且模型得到更新，但 select 视图未显示正确的值。相反，它显示用户点击的值。我这里有最小的工作示例：https://stackblitz.com/edit/angular-ivy-8cybe9

我也尝试过使用 changedetection，但这也无济于事。

Answer 1

select元素显示列表中选择的值，这是浏览器的正常行为。由于模型值没有改变，Angular 没有理由更新元素。要触发这样的更新并放回以前的值，我们必须强制 Angular 检测更改，即使该更改后来被取消。这是一种方法：

将模型属性设置为新值
调用 ChangeDetectorRef.detectChanges() 以强制更改检测
恢复模型中之前的值属性
可选：再次调用 ChangeDetectorRef.detectChanges() 以防止闪烁

updateMetric(currentVal, prevVal) {
  this.currentVal = currentVal;
  this.preVal = prevVal;
  this.model.rating = currentVal;             // <-- set new value
  if (window.confirm("Proceed?")) {
    this.currentVal = currentVal;
  } else {
    this.changeDetectorRef.detectChanges();   // <-- force change detection
    this.model.rating = prevVal;              // <-- restore previous value
    this.currentVal = prevVal;
    this.changeDetectorRef.detectChanges();   // <-- prevent flicker
  }
}

有关演示，请参阅 this stackblitz。

Angular 9 : html select 确实尊重模型中点击后的价值

Angular 9 : html select does respect value in model after click

html

select

angular

angular-changedetection