Angular Material mat-select：取消选择更改事件

Question

我试图弄清楚如何取消 mat-select (Angular Material 7.3.7) 更改事件并在事件处理程序中恢复到以前的状态。有可能吗？

我的选择控件：

                <mat-form-field>
                    <mat-select #visualOptionsSelect formControlName="competenceVisualOption" (selectionChange)="visualOptionSelectionChanged($event)"
                                required>
                        <mat-option *ngFor="let visualOption of availableVisualOptions" [value]="visualOption">
                            {{visualOption.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

当满足某些条件时，我想取消选择并保留之前选择的项目。使用反应形式，我尝试将当前选定的项目存储在单独的变量中，并在 valueChanges 订阅 competenceVisualOption 控件中进行比较。但这看起来很混乱。此外，我对这个选定的项目还有其他依赖项，因此我也需要手动处理它们。

非常感谢任何帮助。提前致谢

Answer 1

嗯，似乎没有我可以使用的开箱即用功能。解决我的问题的唯一方法是存储“最后一个”选定的值 - 如果需要，我可以回滚到它。

我的模板代码：

                <mat-form-field>
                    <mat-select #visualOptionsSelect placeholder="Тип отображения" formControlName="templateCompetenceVisualOption" (selectionChange)="visualOptionSelectionChanged($event.value)"
                                required>
                        <mat-option *ngFor="let visualOption of availableVisualOptions" [value]="visualOption">
                            {{visualOption.name}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

在 selectionchange 事件处理程序中 - selectionChange - 我总是存储当前选定的值，然后如果用户对问题回答“否”，则在新选择后恢复到它（我使用 sweetalert2 库弹出窗口）

visualOptionSelectionChanged(selectedVisualOption: CompetenceVisualOption) {

    //если ранее поле было не заполнено, то не задаем вопрос
    if (!this.lastActiveVisualOption) {

        //перезапишем предыдущее активное значение
        this.lastActiveVisualOption = selectedVisualOption;
        return;
    }

    swal({
        text: 'При смене отображения вариантов ответов, предыдущие значения сбросятся. Сменить отображение ответов?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Да',
        cancelButtonText: 'Нет',
        confirmButtonClass: "btn btn-primary",
        cancelButtonClass: "btn btn-secondary cfb-btn-border",
        buttonsStyling: false
    }).then((result) => {
        if (result.value) {

            // перерисуем область ответов
            this._setRatingLevelOptionsComponent(selectedVisualOption.code);
            //перезапишем предыдущее активное значение
            this.lastActiveVisualOption = selectedVisualOption;
        }
        else {
            //если выбрали Нет, то вернем прежний вариант и варианты ответа не трогаем
            this.templateCompetenceVisualOption.setValue(this.lastActiveVisualOption);
        }
    });
}