有条件地防止 mat-select 中的值发生变化

Question

当用户尝试在 mat-select 中选择另一个值时，我想显示弹出窗口以确认用户是否确实想要选择另一个值。我及时显示弹出窗口的问题是所选值已经出现在垫选择中。在用户决定选择之前，我可以以某种方式阻止该值发生更改吗？ 这是示例代码

Answer 1

您无法取消该事件，因为该事件是在 MatSelect 值已更改后引发的。

更新回复：

正如评论中所指出的，pairwise 并不是最好的解决方案，因为它将恢复为取消的值。

我再次更新了示例，将以前的值存储在变量中，并在取消选择时恢复它

旧回复：

但是，您可以使用 rxjs 中的 pairwise 运算符来获取 valueChanges 事件中包含的先前值。然后，只需在值更改时向用户显示对话框，如果他们取消操作，则将值恢复到之前的值（不发出另一个事件）并完成事件，而不通过返回 EMPTY 处理订阅函数.

使用反应式表单时会更容易，如更新的示例

所示

Answer 2

您基本上需要两件事 - 防止设置值并保持选择的下拉列表打开。

event.stopPropagation()

会做到这一点。在

<option>

中使用

div

占据大部分空间：

<div (click)="$event.stopPropagation()">
  <mat-option *ngFor="let val of values" [value]="val">

然后将值设置为控制值，如果确认对话框得到确认，则关闭MatSelect。在这里我分叉了完整实现

Answer 3

我能够通过使用 MatSelectChange source.value 属性解决这个问题。

currentValue = 0;
onSelectionChanged(event: MatSelectChange): void {

//rollback changing
event.source.value = this.currentValue;

//any other actions here e.g. dialog popup or anything else

// set updated value
this.currentValue = event.value;
}

希望这有帮助

Answer 4

更改事件不可取消。

要获得此行为，您应该将值保存到属性，然后在等待结果时将其分配给下拉列表。确认后还应保存所选值并进行分配

previousValue = "Option 1";
new Value = "Option 1";

onValueChanged(e: Event) {
    this.newValue = e.value; // stores the furure value
    this.someSelectedValue = previousValue; // resets the value back before dialog
    this.openDialog();
  }

然后

dialogRef.afterClosed().subscribe(result => {
      if (res) {
        this.someSelectedValue = this.newValue;
      }
      //this.animal = result;
    });