Angular7 Mat-select 截取变化 [英] Angular7 Mat-select intercept change

问题描述

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

我尝试将用例简化为

为了解决这个问题，我们必须在 selectionChange 事件触发后立即将所选值重置为其先前的值，让用户决定，如果它确认了选择，我们将相应地更新更新选择.

代码如下:

intercept(food:any) {//首先，将选择重置为之前的值//这样用户就看不到选择真的改变了//我们需要超时才能工作setTimeout(() => {this.selectedFood = this.previousSelectedFood;}, 1);const bottomSheetRef = this.bottomSheet.open(BottomSheetOverviewExampleSheet);bottomSheetRef.afterDismissed().subscribe( 结果 => {如果(结果 === 真){//更新选中的值this.selectedFood = 食物；//更新之前选择的值this.previousSelectedFood = 食物；//根据 `food` 值更新其他输入this.otherInputValues = 食物；}});}

演示:https://stackblitz.com/edit/角度-dhgfmx-xmvfvf

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>

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. Select e.g. Pizza
2. Popup appears
3. !The dropdown remains on the original selection and after the popup disappears a change happen!
4. Select e.g. Tacos
5. Popup appears
6. !The dropdown remains on the original selection (=Tacos) and after the popup disappears a change happen!

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

解决方案

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.

, as described in Angular Material docs.

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

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.

A simple example would be:

<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;
    }
  });
}

Demo: https://stackblitz.com/edit/angular-dhgfmx-9rzt7v

Now, the example above has an issue:

• in UI, the select displays the new selected value, when the popup is opened, even if the user has not made a decision :

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.

The code would be:

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;
    }
  });
}

Demo: https://stackblitz.com/edit/angular-dhgfmx-xmvfvf

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