我如何防止剑道下拉列表在角度 4+ 中更改 valueChange 或 selectionChange 事件的值

Question

我有一个剑道下拉列表，我在更改下拉值之前显示一个对话框确认框。它工作正常，但是尽管在 dailog 框中做了任何事情，但下拉值正在发生变化，我如何才能停止在下拉列表上更改值。

我的带有 valueChange 事件的下拉列表。

 <kendo-dropdownlist required [data]="responseTypes"
                                [defaultItem]="{responseTypeID: null, responseTypeName: 'Select Response Type'}"
                                [textField]="'responseTypeName'"
                                [valueField]="'responseTypeID'"
                                name="responseTypeId"
                                [(ngModel)]="selectedResponseType"
                                (valueChange)="responseTypeChange($event, this)"
                                #responseTypeIdVar="ngModel" class="form-control" style="width:180px;">

responseTypeChange 方法

public responseTypeChange(value: any, data: any): void {
    let changeResponseType: boolean = false; 
    if (this.oldResponseTypeValue != undefined) {
        const dialog: DialogRef = this.dialogService.open({
          title: "Primary Insights",
          content: "Changing response type will remove the options filled, Do you want to continue?",
          actions: [
            { text: "No" },
            { text: "Yes", primary: true }
          ],
          width: 520,
          minWidth: 250
        });

        dialog.result.subscribe((result) => {
          if ((result as any).text === "Yes") {
            //changeResponseType = true;
            this.initializeResponseType(value);
          }
          if ((result as any).text === "No") {
            //changeResponseType = true;
            this.selectedResponseType = this.oldResponseTypeValue;
            this.multipleChoiceResponse.multipleChoiceOptionsArray = data.multipleChoiceResponse.multipleChoiceOptionsArray;
          }
        });
      }
  }

Answer 1

作为一种解决方法，您可以将值设置回之前的值，然后打开对话框。如果用户确认操作，则在对话框结果处理程序中将下拉值设置为新值。

public handleValueChange(value: Product): void {
  this.destroyDialog();

  this.value = this.previousValue;
  this.dropDownList.value = this.previousValue;

  this.changeDetector.markForCheck();

  this.dialog = this.dialogService.open({
    title: "Are you sure?",
    content: "Are you sure you want to proceed?",
    actions: [{ text: "No" }, { text: "Yes", primary: true }],
    width: 450,
    height: 200,
    minWidth: 250
  });

  this.dialogSubscription = this.dialog.result
    .pipe(take(1))
    .subscribe(result => {
      if (!(result instanceof DialogCloseResult) && result.text === "Yes") {
        this.previousValue = value;
        this.dropDownList.value = value;
        this.value = value;
      }
    });
}

您可以查看基于剑道团队提供的演示的演示 here。

注意：您必须确保绑定到与下拉列表相同的属性的任何组件检查值是否实际更改以防止冗余操作。