【问题标题】:How can i stop a dropdownlist from value change on selection in kendo/angular如何在 kendo/angular 中选择值更改时停止下拉列表
【发布时间】:2019-05-18 15:37:17
【问题描述】:

我想要控制下拉列表值选择的变化。我想停止下拉列表中选定的值更改。

我有剑道下拉列表,在它的触发 valueChange 事件上。

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

</kendo-dropdownlist>

【问题讨论】:

  • 所以你使用 ngModel 和 2 路绑定,如果用户选择另一个值,绑定的值不应该改变?
  • @Geggi632:我在每次下拉选择后都会显示一个剑道对话框确认框,但在用户可以在对话框上执行“是”或“否”之前,下拉列表值正在更改为关闭状态并且在下拉列表中显示更改后的选定值。我可以看到弹出对话框后面的值在屏幕上。
  • 将 [(ngModel)] 更改为 [ngModel] 并将值(如果弹出窗口接受)设置为 selectedResponseType。
  • @Geggi632 :我已经这样做了,它工作正常,但问题是当对话框出现在屏幕上时。在叠加层下方弹出窗口后面的下拉列表中,已更改为所选值,然后使用“是”或“否”按预期工作。

标签: angular typescript drop-down-menu kendo-ui kendo-ui-angular2


【解决方案1】:

这是我使用 ChangeDetectorRef 从 Kendo 团队获得的一种解决方案。在重新分配 this.value 之前调用了 detectChanges。 valueChange 事件不可预防,您必须根据需要手动重置组件的值

Click here for the example

【讨论】:

  • 谢谢@Srééjîth Náîr。
【解决方案2】:

这不是最好的答案,我希望你能找到一个更好的答案,但它确实有效..

绑定:

<kendo-dropdownlist [value]="selectedVal"
  (valueChange)="valueChange($event)">

valueChange() 代码:

public valueChange(value: any): void {
    let valToShow = this.selectedVal;
    this.newVal = value;
    setTimeout(() => {
      this.selectedVal = "changeToSomethingOther";
    }, 1);
    setTimeout(() => {
      this.selectedVal = valToShow;
    }, 1);
    this.open('dialog');
    this.log('valueChange', value);
  }

我正在做的是将绑定值更改为不同的值,然后返回旧值,但您必须在 setTimeOut 中执行此操作才能触发更改检测。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-04-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多