角度：更改使用打字稿选择的KendoDropdown数据

Question

下面是如何在Kendo Angular中绑定到远程数据。

如何更改具有接受事件的所选下拉菜单，该事件将更改在剑道下拉菜单中选择的输入？

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

您可以使用表格将值绑定到剑道控件。

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>

---