首页 > 解决方案 > 如何使用 Angular 打字稿触发 Kendo 下拉列表中的更改事件?

问题描述

不知道触发下拉列表的更改事件

我的html:

<div class="row">
    <div class="col-md-6">
        <mat-label id="title-t" class="required"></mat-label>
        <kendo-dropdownlist
            id="tID"
            [data]="dataSourceList"
            [textField]="'name'"
            [valueField]="'code'"
            formControlName="tList"
            (valueChange)="onChangeList($event)">
        </kendo-dropdownlist>
    </div>
</div>

我的ts:

public onChangeList(e){
   var t_code= e.code;
   console.log(t_code);
}

我想在另一个函数中调用事件更改,如下所示:

//tID.kendoDropDownList.change();

或者:

var dropdownlist = $("#id").data("kendoDropDownList");
 
dropdownlist.trigger("change");

标签: angulartypescripteventsdrop-down-menukendo-ui-angular2

解决方案


我假设您想以编程方式更改下拉值。

为此,您只需向下拉列表添加双向绑定。

在您的 HTML 中:

<div class="col-md-6">
    <mat-label id="title-t" class="required"></mat-label>
    <kendo-dropdownlist
        id="tID"
        [data]="dataSourceList"
        [(ngModel)]="value"
        [textField]="'name'"
        [valueField]="'code'"
        formControlName="tList"
        (valueChange)="onChangeList($event)">
    </kendo-dropdownlist>
</div>

在您的 ts 文件中声明一个名为 value 的类变量,然后更改它。请注意,绑定值应该是 [data] 列表中的一项。

public value:any;

public change(): void{
  this.value = {code: "ts", value:"tslist"};
}

推荐阅读