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

Posted 2023-05-07

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

【英文标题】：How can i prevent kendo dropdownlist from changing its value on valueChange or selectionChange events in angular 4+

【发布时间】：2019-10-04 00:23:40

【问题描述】：

我有一个剑道下拉列表，我在更改下拉值之前显示一个对话框确认框。它工作正常，但是尽管在 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;
          
        );
      
  

【问题讨论】：

暂时没办法 - github.com/telerik/kendo-angular/issues/1285

【参考方案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。

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