未显示 Ag-Grid 过滤器

Question

我的 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'
}

Answer 1

您正在将字符串 'true' 分配给布尔值（真或假），并且 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

Answer 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,
    }

未显示 Ag-Grid 过滤器

Ag-Grid filter not shown

filter

ag-grid

angular