可重复使用的列菜单过滤器（Kendo for Angular 2+）答案

【问题标题】：Reusable Column MENU Filter (Kendo for Angular 2+)可重复使用的列菜单过滤器（Kendo for Angular 2+）
【发布时间】：2018-03-29 13:51:51
【问题描述】：

我正在尝试找到在角剑道中配置网格过滤选项的最佳方法（来自 asp.net telerik 的东西）。我想我通常按照我想要的方式拥有它，但遇到了问题。

我正在尝试实现这个例子：https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/reusable-filter/

但我想使用过滤器菜单而不是过滤器行。所以我更改了 filterable="menu" 和 kendoGridFilterMenuTemplate，但现在选择下拉过滤器会爆炸。

这是一个例子：

https://plnkr.co/edit/2OI4wk7FaQHwOoJuZjos?p=preview

<ng-template kendoGridFilterMenuTemplate let-filter>
            <my-dropdown-filter
                [filter]="filter"
                [data]="distinctCategories"
                textField="CategoryName"
                valueField="CategoryID">
            </my-dropdown-filter>
</ng-template>

关于如何完成这项工作的任何想法/建议？

【问题讨论】：

标签： angular kendo-ui-angular2

【解决方案1】：

万一有人需要这个……剑道人给我指出了正确的方向。我相信这只是文档还没有赶上的一个例子（开发站点中有一个新的例子，它准确地显示了我需要的东西）。

总结：使用过滤器菜单模板时，需要通过过滤器服务，在onchange事件中调用filterService.filter而不是apply过滤器。

如果有人需要，这是自定义过滤器控件/下拉列表中的相关代码：

import {Component, Input, Output} from '@angular/core';
import {CompositeFilterDescriptor} from '@progress/kendo-data-query';
import {FilterService, BaseFilterCellComponent} from '@progress/kendo-angular-grid';

@Component({
  selector: 'grid-dropdown-filter',
  template: `
    <kendo-dropdownlist
      [data]="data"
      (valueChange)="onChange($event)"
      [defaultItem]="defaultItem"
      [value]="selectedValue"
      [valuePrimitive]="true"
      [textField]="textField"
      [valueField]="valueField">
    </kendo-dropdownlist>
  `
})
export class GridDropdownFilterComponent extends BaseFilterCellComponent {
  @Input() public filter: CompositeFilterDescriptor;
  @Input() public filterService: FilterService;
  @Input() public data: any[];  // Dropdown list data
  @Input() public textField: string;
  @Input() public valueField: string;
  @Input() public field: string;
  
  public get selectedValue(): any {
    const filter: any = this.filterByField(this.field);
    return filter ? filter.value : undefined;
  }

  public get defaultItem(): any {
    return {
      [this.textField]: 'Select item...',
      [this.valueField]: undefined
    };
  }

  constructor(filterService: FilterService) {
    super(filterService);
  }

  public onChange(value: any): void {
    this.filter = this.updateFilter({
      field: this.field,
      operator: "eq",
      value: value
    });

    this.filterService.filter(this.filter);
  }
}

【讨论】：