Блог

Когда пользователь пытается выбрать другое значение в mat-select, я хочу показать всплывающее окно, чтобы подтвердить, действительно ли пользователь хочет выбрать другое значение. Проблема во времени, когда я показываю всплывающее окно, визуально выбранное значение уже представлено в mat-select. Могу ли я как-то предотвратить изменение этого значения до тех пор, пока пользователь не решит выбрать? Вот пример кода

События изменений не могут быть отменены.

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

 previousValue = "Option 1";
new Value = "Option 1";

onValueChanged(e: Event) {
    this.newValue = e.value; // stores the furure value
    this.someSelectedValue = previousValue; // resets the value back before dialog
    this.openDialog();
  }
 

и затем

 dialogRef.afterClosed().subscribe(result => {
      if (res) {
        this.someSelectedValue = this.newValue;
      }
      //this.animal = resu<
    });
 

Вам в основном нужны две вещи — запретить установку значения и сохранить раскрывающийся список выбора открытым. event.stopPropagation() сделаю это. <option> Используется для div того, чтобы занимать большую часть пространства:

 <div (click)="$event.stopPropagation()">
  <mat-option *ngFor="let val of values" [value]="val">
 

Затем установите значение в значение управления и закройте окно выбора, если диалоговое окно подтверждения будет подтверждено. Здесь я раздвоил полную реализацию