angular - 我如何防止剑道下拉列表在 angular 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基于 Kendo 团队提供的演示。

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