Mat select-获取选择的旧值Change [英] Mat select - Get old value of selectionChange

问题描述

我有一个项目，其中有一个包含 mat-select 选择器的表单.每当用户更改输入时，我都会向用户显示一个对话框以确认此操作.现在:

I have a project in which I have a form containing a mat-select selector. Whenever the user changes the input, I show the user a dialog to confirm this operation. Now:

selectionChange()会通知何时更改值，并将新值作为 $ event 传递.

The selectionChange() notifies when the value was changed and passes the new value as $event.

是否有一种方法可以使旧值返回，以防用户取消对话框?

我不想这样做，就像将当前值保存在单独的成员变量中一样.

I don't want to do the dirty way like, saving the current value in a seperate member variable.

模板:

<mat-select [(ngModel)]="selectedTextCountingType" 
            (selectionChange)="select($event)">
  <mat-option *ngFor="let option of countingTypeOptions" 
              [value]="option.value">
    {{option.text | translate}}
  </mat-option>
</mat-select>

TS:

select(option: MatSelectChange): void { 
    this.openConfirmDeletionDialog().pipe(
        filter((respose) => {
            // HERE IS WHERE I NEED IT.
            if(Boolean(reponse) === false) {
                this.selectedTextCountingType = oldValue;
            }
            return Boolean(reponse); 
        })
    )
}

推荐答案

实际上，您有一种针对您预期行为的解决方法，因为当触发 selectionChange 事件时，您会将模型绑定到该选择垫上您的元素已经更新，但是如果您打印出模型，它将是选择标签上次通过angular更新时形成的文字，在您的情况下，因为您是类型列表的ngFor，以后可以通过以下方式找到它文字，值或您可能希望使用的其他任何属性.

Actually there is a workaround for you expected behavior, since you are binding a model to that mat select when the event selectionChange is triggered your element is already updated , but if you print out the model it will be the literal that was formed when the select-tag was last updated by angular, in your case since you a ngFor of a list of types you can later find it by text, value or any other property you may prefer.

<mat-select [(ngModel)]="selectedTextCountingType" 
            (selectionChange)="select($event, '{{selectedTextCountingType.value}}')">
  <mat-option *ngFor="let option of countingTypeOptions" 
              [value]="option.value">
    {{option.text | translate}}
  </mat-option>
</mat-select>

在您的组件中，您应该将值作为字符串

and in your component you should have the value as a string

select(option: MatSelectChange, oldValue: string): void { 
    this.openConfirmDeletionDialog().pipe(
        filter((respose) => {
            if(Boolean(reponse) === false) {
                this.selectedTextCountingType = this.selectedTextCountingType.find(countingType => countingType.value === oldValue);
            }
            return Boolean(reponse); 
        })
    )
}

这篇关于Mat select-获取选择的旧值Change的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！