Question

我正在尝试添加一个外部过滤器，但是首先，它不起作用，现在我的网格不显示，它一直处于加载状态，所以我不在过滤器和网格之内。

目前，我正在对数据进行硬编码，首先，我想确保它能正常工作，然后再从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，但我不知道为什么过滤器之前无法工作，或者为什么我的网格不再显示。

Answer 1

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

再次查看示例：

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

Answer 2

似乎您没有导入ClientSideRowModelModule模块类型

public modules: Module[] = [ClientSideRowModelModule];

签出此plunkr

外部过滤器网格

2 个答案: