Ag-Grid 过滤器未显示答案

【问题标题】：Ag-Grid filter not shownAg-Grid 过滤器未显示
【发布时间】：2019-04-20 21:26:08
【问题描述】：

我的 html 文件中有这段代码：

<ag-grid-angular   #agGrid
                   style="height: 300px"
                   [rowData]="rowData"
                   [columnDefs]="columnDefs"
                   [gridOptions]="gridOptions"
                   [enableFilter]="true"
                   (rowSelected)="getSelectedRows($event)">

</ag-grid-angular>

并且过滤器图标是可见的，但是当单击该图标时没有任何反应，并且未显示 ag-grid 过滤器。出了什么问题？

component.ts:

import { AgGridNg2 } from 'ag-grid-angular';

@ViewChild('agGrid') agGrid: AgGridNg2

columnDefs = [
    {
        headerName: 'row',
        headerCheckboxSelection: true,
        checkboxSelection: true,
        pinned: "right",
        width: 150
    },
    { headerName: 'code', field: 'Code'},
    { headerName: 'name', field: 'Name' },

];

gridOptions = {
    rowSelection: 'multiple',
    enableSorting: 'true',
    enableColResize: 'true',
    enableRtl: 'true',
    pagination: 'true',
    paginationAutoPageSize: 'true',
    animateRows: 'true'
}

【问题讨论】：

请发布您的 ts 代码。

标签： angular filter ag-grid

【解决方案1】：

您将字符串“true”分配给布尔值（true 或 false），ts 代码应类似于：

import {Component} from "@angular/core";
import {GridOptions} from "ag-grid";

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {

    private gridOptions: GridOptions ;
    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
          {
            headerName: 'row',
            headerCheckboxSelection: true,
            checkboxSelection: true,
            pinned: "right",
            width: 150,
            field: 'row'
          },
          { 
            headerName: 'Code', 
            field: 'code'
          },
          { 
            headerName: 'Name', 
            field: 'name' 
          },
        ];
        this.gridOptions.rowData = [
            {row: 'test', code: 'test' , name:'test'}
        ]
    }

    getSelectedRows(e){
      console.log('e')
    }
}

DEMO

【讨论】：

我做了你的解决方案，但我的问题仍然存在，点击过滤器图标后，未显示 ag-grid 过滤器

【解决方案2】：

在这里您使用自定义过滤，

如果您的行没有与值绑定，则使用自定义过滤。

     {
        headerName: "Date",
        field: "date",

        //Custom  Filter Start

        filterValueGetter: (params: ICellRendererParams) => 
        {
          if (this.transactionIsEmpty(params.data)) 
          {
            const tx: Transaction = params.data;
            return moment(tx.date).format('DD-MM-YYYY');
          }
        },

        //Custom  Filter End

        cellStyle: { 'text-align': 'left' },
        minWidth: 250,
    }

【讨论】：