Angular：更改使用 Typescript 选择的 KendoDropdown 数据

Question

下面是如何绑定到 Kendo Angular.

中的远程数据

如何使用接受的事件更改选定的下拉列表，该事件会更改 Kendo 下拉列表中选定的输入？

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/

import { Component, OnInit, Inject } from '@angular/core';
import { DataService } from './data.service';
import { Product } from '../common/product.model';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems"
      [textField]="'ProductName'"
      [valueField]="'ProductID'"
      [defaultItem]="placeHolder" >
    </kendo-dropdownlist>
  `,
  providers: [DataService]
})
export class AppComponent implements OnInit {
    public listItems: Array<Product> = [];
    public placeHolder: Product = { ProductName: 'Select product...', ProductId: null };

    constructor (@Inject(DataService) private dataService: DataService) { }

    ngOnInit() {
      this.dataService.fetchData().subscribe(
        (data) => this.listItems = data
      );
    }
}

我想在打字稿中注入类似上面的内容。说 IdSelected = 3,

我的代码研究

this.dataservice.currentMessage.subscribe(currentMessage => {
  this.valueField = currentMessage.IdSelected();
})

Answer 1

您可以使用表单将值绑定到 kendo 控件。

TS:

public selectedValue: number;
ngOnInit() {
   this.dataService.fetchData().subscribe(
     (data) => {
         this.listItems = data;
         this.selectedValue = data[0].productId;
        }
     );
 }

HTML:

<kendo-dropdownlist [data]="listItems"
  [(ngModel)]="selectedValue"  <!-- Here it is -->
  [textField]="'ProductName'"
  [valueField]="'ProductID'"
  [defaultItem]="placeHolder" >
</kendo-dropdownlist>

---