如何使用 Angular 打字稿触发 Kendo 下拉列表中的更改事件？答案

【问题标题】：How to trigger change event in Kendo dropdownlist with Angular typescript?如何使用 Angular 打字稿触发 Kendo 下拉列表中的更改事件？
【发布时间】：2020-09-29 21:29:28
【问题描述】：

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

我的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");

【问题讨论】：

标签： angular typescript events drop-down-menu kendo-ui-angular2

【解决方案1】：

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

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

在您的 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"};
}

【讨论】：