Angular: изменение данных KendoDropdown, выбранных с помощью Typescript - PullRequest
Новая
       30

Angular: изменение данных KendoDropdown, выбранных с помощью Typescript

0 голосов
/ 08 ноября 2019

Ниже приведено описание привязки к удаленным данным в 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();
})

1 Ответ

1 голос
/ 08 ноября 2019

Вы можете использовать формы для привязки значения к элементу управления кендо.

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>
...