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

Question

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

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

Answer 1

select element 显示列表中选中的值，这是浏览器的正常行为。并且由于模型值没有改变，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用于演示。