Question

我有一个剑道下拉列表，我在更改下拉值之前显示一个对话框确认框。它工作正常，但是尽管在下拉菜单中进行了任何操作，但下拉值仍在更改，我如何才能停止下拉列表上的值更改。

带有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;
      }
    });
}

您可以看到基于 Kendo 团队提供的演示的演示 here。

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

我如何防止Kendo dropdownlist在angular 4+中的valueChange或selectionChange事件上更改其值

1 个答案: