Question

在用例场景中，我有一个下拉框（mat-select），其中填充了多个输入字段。任何更改将以不同的方式填充字段。由于用户可以更改字段，因此我想在执行最终更改之前询问用户是否同意清除（或更改）所有字段。如果为“否”，则不会发生选择更改，并且所有字段都应保留。

我试图将用例减少到sample。我可以从下拉菜单中选择一项，然后执行一些其他操作。

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

但是在执行selectionchange时，下拉菜单的内容已经更改。对于sample，我想举个例子，

选择例如披萨
出现弹出窗口
！下拉菜单仍保留在原始选择中，并且在弹出窗口消失后发生更改！
选择例如炸玉米饼
出现弹出窗口
！下拉菜单保留在原始选择（= Tacos）上，并且在弹出窗口消失后发生更改！

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

Answer 1

我们无法在更改发生之前拦截选择的change事件，因为selectionChange事件是：

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

，如Angular Material docs中所述。

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

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

一个简单的例子是：

<mat-select [(ngModel)]="selectedFood" (selectionChange)="intercept($event.value)">

selectedFood = '';
previousSelectedFood = '';


intercept(food:any) {
  const bottomSheetRef = this.bottomSheet.open(BottomSheetOverviewExampleSheet);

  bottomSheetRef.afterDismissed().subscribe( result => {
    if (result === true) {
       // update the the previous selected value
       this.previousSelectedFood = food;

       // update the other inputs based on `food` value
       this.otherInputValues = food;

    } else {
       // reset the selection to the previous value
       this.selectedFood = this.previousSelectedFood;
    }
  });
}

演示： https://stackblitz.com/edit/angular-dhgfmx-9rzt7v

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

在UI中，即使用户未做出决定，select也会在打开弹出窗口时显示新的选定值：

为解决此问题，我们必须在selectionChange事件触发后立即立即将所选值重置为其先前的值，让用户自行决定是否确认selectios，我们将相应地更新选择内容。

代码为：

intercept(food:any) {

  // at first, reset the select to the previous value
  // so that the user could not see that the select has really changed
  // we need a timeout to make in work
  setTimeout( () => {
    this.selectedFood = this.previousSelectedFood;
  }, 1);

  const bottomSheetRef = this.bottomSheet.open(BottomSheetOverviewExampleSheet);

  bottomSheetRef.afterDismissed().subscribe( result => {
    if (result === true) {
       // update the selected value
       this.selectedFood = food;

       // update the previous selected value
       this.previousSelectedFood = food;

       // update the other inputs based on `food` value
       this.otherInputValues = food;
    }
  });
}

演示：https://stackblitz.com/edit/angular-dhgfmx-xmvfvf

Answer 2

据我所知，您无法阻止此更改。唯一的可能性是保存选择的旧值，如果用户取消模式/弹出窗口，则将其重置为该值。不久前，我遇到了同样的问题。

编辑：也许这可以帮助Thread

Answer 3

这就是我的工作。

模板：

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

代码：

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

Angular7 Mat-select截距更改

3 个答案: