angular2中引用kendoUI-combobox进行过滤

*
引用kendoUI-combobox组件,并过滤
定义组件里需要用到的属性:
allowCustom:是否允许用户输入不在数据集中的值,默认false
data:数据集
filterChange:定义过滤方法
filterable:是否过滤
valuePrimitive:是否原始类型数据
ngStyle:样式

<kendo-combobox
      [allowCustom]="false"
      [data]="filterData"
      (filterChange)="modelChanged.next($event)"
      [(ngModel)]="value"
      [filterable]="true"
      [valuePrimitive]="true"
      [ngStyle]="ngStyle"
    ></kendo-combobox>
  public options: any[];

  public ngStyle = {'width': '100%'};

  public filterData = [];

  modelChanged: Subject<object> = new Subject<object>();

  handFilter(value) {
    let datas = this.options;
    this.filterData = [];
    if (value)
      datas = datas.filter(i => i.indexOf(value) != -1);
      datas.forEach(i => {
      this.filterData.push(i);
    });
  }

  ngOnInit() {
    this.Svc.query("基础代码#地区").then(data => {
      this.options = [];
      data.forEach(m => {
        this.options.push(m["地区名称"]);
      })
      this.filterData = this.options;
    });
    this.modelChanged.debounceTime(300).distinctUntilChanged().subscribe(m => this.handFilter(m));
  }

sea.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值