Mat select - Получить старое значение selectionChange

Question

У меня есть проект, в котором у меня есть форма, содержащая селектор mat-select. Всякий раз, когда пользователь изменяет ввод, я показываю пользователю диалоговое окно для подтверждения этой операции. Сейчас:

selectionChange() уведомляет, когда значение было изменено, и передает новое значение как $event.

Есть ли способ вернуть старое значение обратно в случае, если пользователь отменил диалог?

Я не хочу делать грязный способ, как, сохраняя текущее значение в отдельной переменной-члене.

Шаблон:

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

Answer 1

На самом деле есть обходной путь для ожидаемого поведения, так как вы привязываете модель к этому мату, когда запускается событие selectionChange, ваш элемент уже обновлен, но если вы распечатаете модель, это будет литерал, которыйбыл сформирован, когда тег выбора последний раз обновлялся по angular, в вашем случае, если вы ngFor из списка типов, вы можете позже найти его по тексту, значению или любому другому свойству, которое вы предпочитаете.

<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>

и в вашем компоненте вы должны иметь значение в виде строки

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