Angular7 Mat-select截距更改 [英] Angular7 Mat-select intercept change

问题描述

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

In my use case scenario I have a dropdown box (mat-select) which fills several input fields. Any change will fill the fields differently. Since the user could change a field I want to ask the user before the final change is executed if (s)he agree to clear(or change) all fields. In case of a NO the selection change will not happen and all fields should remain.

我试图将用例简化为样本.我可以从下拉菜单中选择一项，然后执行一些其他操作.

I tried to reduce the use case to a sample. I can select an item from the dropdown and do some further actions.

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

但是在执行selectionchange时，下拉菜单的内容已经更改.对于样本我想要例如

But at the time the selectionchange is exectued the content of the dropdown is already changed. For the sample I would like to have e.g.

1. 选择例如披萨
2. 出现弹出窗口
3. ！下拉菜单仍保留在原始选择中，并且在弹出窗口消失后发生更改！
4. 选择例如炸玉米饼
5. 出现弹出窗口
6. ！下拉菜单保留在原始选择(= Tacos)上，并且在弹出窗口消失后发生更改！

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

I have no clue how to intercept the change event before the change happen.

推荐答案

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

We can't intercept the select change event before the change happens, because the selectionChange event is :

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

Event emitted when the selected value has been changed by the user.

，如角度材料文档所述.

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

But we can trigger the update of the other form controls only after the user confirms it.

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

And, as @liqSTAR described, we must save the previous value of the selection and reset the select to it if the user cancels the popup.

一个简单的例子是:

<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

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

Now, the example above has an issue:

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

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

In order to fix this issue, we have to reset the selected value to its previous value immediately after the selectionChange event fires, that let the user decide, and if it confirms the selectios, we'll update update the select accordingly.

代码为:

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

这篇关于Angular7 Mat-select截距更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！