#angular #angular-material
Вопрос:
Когда пользователь пытается выбрать другое значение в mat-select, я хочу показать всплывающее окно, чтобы подтвердить, действительно ли пользователь хочет выбрать другое значение. Проблема во времени, когда я показываю всплывающее окно, визуально выбранное значение уже представлено в mat-select. Могу ли я как-то предотвратить изменение этого значения до тех пор, пока пользователь не решит выбрать? Вот пример кода
Ответ №1:
События изменений не могут быть отменены.
Чтобы получить такое поведение, вам следует сохранить значение в свойстве, а затем присвоить его раскрывающемуся списку, ожидая результата. Выбранное значение также должно быть сохранено и присвоено после подтверждения
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<
});
Ответ №2:
Вам в основном нужны две вещи — запретить установку значения и сохранить раскрывающийся список выбора открытым. event.stopPropagation()
сделаю это. <option>
Используется для div
того, чтобы занимать большую часть пространства:
<div (click)="$event.stopPropagation()">
<mat-option *ngFor="let val of values" [value]="val">
Затем установите значение в значение управления и закройте окно выбора, если диалоговое окно подтверждения будет подтверждено. Здесь я раздвоил полную реализацию