Question

我试图弄清楚如何取消mat-select（角度材料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);
        }
    });
}

角度材质垫选择：取消选择更改事件

1 个答案: