外部过滤器 ag-grid答案

【问题标题】：External filter ag-grid外部过滤器 ag-grid
【发布时间】：2020-06-12 23:10:41
【问题描述】：

我正在尝试添加一个外部过滤器，但首先它不起作用，现在我的网格没有显示，它停留在加载中，所以我没有过滤器和网格。

目前我正在对数据进行硬编码，首先，我想确保它可以正常工作，然后我将从 API 中获取数据。

export class AgreementListComponent implements OnInit {
    private gridApi;
    private gridColumnApi;
    ageType = "";

    private columnDefs;
    private defaultColDef; 
    private rowData: [
    {
        title: 'Agreement 1', status: 'Status 1', type: 'Type 1', effectiveDate: 'February/28/2020', 
        expirationDate: 'February/28/2020',
        upcomingStipulations: 'Upc Stip 1', overdueStipulations: 'Over Stip 1'
    },
    {
        title: 'Agreement 2', status: 'Status 2', type: 'Type 2', effectiveDate: 'February/28/2020', 
        expirationDate: 'February/28/2020',
        upcomingStipulations: 'Upc Stip 2', overdueStipulations: 'Over Stip 2'
    }
    ];

    constructor() {
        this.columnDefs = [
            { headerName: "Agreement Title", filter: true, field: 'title' },
            { headerName: "Status", filter: 'agTextColumnFilter', field: 'status' },
            { headerName: "Agreement Type", filter: true, field: 'type' },
            { headerName: "Effective Date", filter: true, field: 'effectiveDate' },
            { headerName: "Expiration Date", filter: true, field: 'expirationDate' },
            { headerName: "Upcoming Stipulations", filter: true, field: 'upcomingStipulations' },
            { headerName: "Overdue Stipulations", filter: true, field: 'overdueStipulations' },
    ]

    this.defaultColDef = { filter: true };
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
        this.rowData =   this.rowData
    }

    isExternalFilterPresent() {
        return this.ageType != "everyone";
    }

    externalFilterChanged(newValue) {
        console.log('externalFilterChanged')
        this.ageType = newValue;
        this.gridApi.onFilterChanged();
    }

    doesExternalFilterPass(node) {
        switch (this.ageType) {
            case "below30":
            return node.data.status = 'Status 1';
        default:
            return true;
        }
    }
    ngOnInit() {

    }

}

这是我的 HTML

<div>
    <button (click)="externalFilterChanged('Status 1')">Status 1</button>
</div>
<ag-grid-angular style="width: 100%; height: 400px;" class="ag-theme-balham" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [doesExternalFilterPass]="doesExternalFilterPass" 
    [isExternalFilterPresent]="isExternalFilterPresent"
    [animateRows]="true"
    [defaultColDef]="defaultColDef"
    [enableSorting]="true"
    [enableFilter]="true"
    (gridReady)="onGridReady($event)">
</ag-grid-angular>

我试图关注这个guide，但我不知道为什么过滤器之前不起作用，或者为什么我的网格不再显示。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

ageType 应该是在类外声明的全局变量。

再看一遍例子：

https://www.ag-grid.com/javascript-grid-filter-external/

【讨论】：

【解决方案2】：

好像你没有导入 ClientSideRowModelModule 模块类型

public modules: Module[] = [ClientSideRowModelModule];

看看这个plunkr

【讨论】：