在 ag-grid 中带有下拉菜单的自定义过滤器在角度 10 中不起作用

Posted 2023-03-28

【中文标题】在 ag-grid 中带有下拉菜单的自定义过滤器在角度 10 中不起作用

【英文标题】：Custom filter with dropdown in ag-grid is not working in angular 10

【发布时间】：2021-05-17 03:15:31

【问题描述】：

我在我的 Angular 应用程序中创建了一个带有 ag-grid 的网格。有一列名称为类别。此列的行只能包含 A 或 B 或 C 值。现在我想创建一个包含 A、B 和 C 值的下拉列表的自定义过滤器。代码如下：

组件 HTML：

<select [(ngModel)]="currentValue" (ngModelChange)="valueChanged()" class="form-control">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

组件 TS：

import  Component, OnInit  from '@angular/core';
import  AgFrameworkComponent  from 'ag-grid-angular';
import  FilterChangedEvent, IAfterGuiAttachedParams, IFloatingFilter, IFloatingFilterParams, TextFilterModel  from 'ag-grid-community';

export interface SelectFloatingFilterParams extends IFloatingFilterParams 
  selectedValue: string;


@Component(
  selector: 'app-category-floating-filter',
)
export class CategoryFloatingFilterComponent implements IFloatingFilter, AgFrameworkComponent<SelectFloatingFilterParams> 
  params: SelectFloatingFilterParams;
  currentValue: string;

  agInit(params: SelectFloatingFilterParams): void 
    this.params = params;
    this.currentValue = this.params.selectedValue;
  

  valueChanged() 
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilterModel) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  

  onParentModelChanged(parentModel: TextFilterModel): void 
    if (!parentModel) 
      this.currentValue = "";
    
    else 
      this.currentValue = parentModel.filter;
    
  

但是在编译期间我收到如下错误：

类型上不存在属性“onFloatingFilterChanged” 'TextFilterModel'。

24 instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));

这意味着 onFloatingFilterChanged 在 TextFilterModel 类中不存在。那么我如何在从下拉列表中选择一个值后过滤网格。谁能帮帮我。

【参考方案1】：

我找到了答案。代码如下：

agInit(params: SelectFloatingFilterParams): void 
    this.params = params;
    this.currentValue = this.params.selectedValue;
  

  valueChanged() 
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilter) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  

  onParentModelChanged(parentModel: TextFilterModel): void 
    if (!parentModel) 
      this.currentValue = "";
    
    else 
      this.currentValue = parentModel.filter;