Angular7 Mat选择截距更改

在我的用例场景中，我有一个下拉框（

mat select

），它填充了几个输入字段。任何更改都将以不同方式填充字段。由于用户可以更改字段，我想在执行最终更改之前询问用户是否同意清除（或更改）所有字段。如果选择“否”，则不会发生选择更改，所有字段都应保留

我试图将用例简化为一个简单的例子。我可以从下拉列表中选择一个项目并执行一些进一步的操作

  <mat-select (selectionChange)="intercept($event.value)">
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{food.viewValue}}
    </mat-option>
  </mat-select>

{{food.viewValue}

但在执行

selectionchange

时，下拉列表的内容已经更改。对于我想要的，例如

选择例如比萨饼

弹出窗口出现

!！下拉列表保留在原始选择上，在弹出窗口消失后，将发生更改

选择例如玉米卷

弹出窗口出现

!！下拉列表保留在原始选择（=玉米卷）上，在弹出窗口消失后，将发生更改

---

我不知道如何在更改发生之前拦截更改事件。

据我所知，您无法阻止此更改。唯一的可能是保存选择的旧值，并在用户取消模式/弹出窗口时将其重置为该值。我刚才也有同样的问题

---

编辑：这可能会有帮助，因为在更改发生之前，我们无法截获select

change

事件，因为selectionChange事件是：

用户更改选定值时发出的事件

，如中所述

但我们只能在用户确认后触发其他表单控件的更新

而且，如@liqSTAR所述，如果用户取消弹出窗口，我们必须保存选择的上一个值，并将选择重置为该值

一个简单的例子是：

selectedFood=''；
先前选择的食物=“”；
拦截（食物：任何）{
const bottomSheetRef=此.bottomSheet.open（bottomsheetoverview示例页）；
bottomSheetRef.AfterDisposed（）.subscribe（结果=>{
如果（结果==真）{
//更新上一个选定的值
this.previousSelectedFood=食物；
//根据“食品”价值更新其他投入
this.otherInputValue=食物；
}否则{
//将选择重置为上一个值
this.selectedFood=this.previousSelectedFood；
}
});
}

演示：

现在，上面的例子有一个问题：

• 在UI中，当弹出窗口打开时，选择显示新的选定值，即使用户尚未做出决定：

为了解决此问题，我们必须在

selectionChange

事件触发后立即将所选值重置为其以前的值，该事件由用户决定，如果它确认了selectios，我们将相应地更新select

守则是：

intercept（食物：任何）{
//首先，将select重置为上一个值
//这样用户就看不到select已真正更改
//我们需要一个暂停时间来完成工作
设置超时（（）=>{
this.selectedFood=this.previousSelectedFood；
}, 1);
const bottomSheetRef=此.bottomSheet.open（bottomsheetoverview示例页）；
bottomSheetRef.AfterDisposed（）.subscribe（结果=>{
如果（结果==真）{
//更新选定的值
这个。选择的食物=食物；
//更新以前选择的值
this.previousSelectedFood=食物；
//根据“食品”价值更新其他投入
this.otherInputValue=食物；
}
});
}

演示：

以下是我的工作

模板：

<mat-select [ngModel]="something"
            (ngModelChange)="changeSomething($event, ngModelControl)"
            #ngModelControl="ngModel">
   ...
</mat-select>

...

代码：

changeSomething（值：any，ngModelControl:NgModel）{
如果（）{
//复位垫选择
ngModelControl.control.setValue（this.something）；
}否则{
这个东西=价值；
}
}

听起来不太有希望。。。如果这是最终的解决方案，那真是太差劲了，是的，谢谢。但是使用案例是，在选择一个对话框后弹出，在特殊情况下（当关闭对话框时），该选项应设置为先前的值。不知何故，这和我的要求有点不同——因为我想在完全理解你之前而不是之后得到它。我想检查$event.value（一个worker\u id）是否已经在使用中。需要检查它，失败时我需要将所选的新值替换为旧值。原则上，这看起来很有希望。我对这种方法有点保留，因为它在很大程度上依赖于Angular中当前的更新机制。一旦它们内部发生变化，解决方案就会崩溃。更新在Angular的外部（和内部）完成。六羟甲基三聚氰胺六甲醚。。。从长远来看，我真的不知道该怎么办。

changeSomething(value: any, ngModelControl: NgModel) {
  if (<<false for whatever reason>>) {
    // reset mat-select
    ngModelControl.control.setValue(this.something);
  } else {
    this.something = value;
  }
}