在我的 angular 应用中添加外部 ag-grid 过滤器

Question

我正尝试在我的 angular 应用程序中添加外部过滤器，但很费力。

组件数据 - 这是我在外部 json 文件中加载的示例组件

import { Component, OnInit } from '@angular/core';

import {AgGridModule} from "ag-grid-angular";
import { GridOptions } from 'ag-grid/main';
import { HttpClient } from "@angular/common/http";

import {NgModel} from '@angular/forms';

import "ag-grid-enterprise";

@Component({
  selector: 'app-funds-table',
  templateUrl: './funds-table.component.html',
  styleUrls: ['./funds-table.component.css']
})

export class FundsTableComponent implements OnInit {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  ngOnInit() {}
  constructor(private http: HttpClient) {
    this.columnDefs = [{headerName: "Ticker", field: "Ticker"},
      {headerName: "Id", field: "Id"},];
  }    
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
    .get("./../assets/fundsData/fund_info.json")
      .subscribe(data => {
        params.api.setRowData(data);
      });
}}

HTML 文件-这是示例 html 模板我无法使用 ngmodel 2 向绑定使外部按钮工作。

<div class="container">
  <div class="header" style="display:inline">
    <div style="display:inline-block">Overview</div>
    <div style="display:inline-block">Risk</div>
  </div>
<div><div><form>
    <input type="text" ng-model="$myGrid.gridOptions.quickFilterText" placeholder="Type text to filter..." class="toolbarFilterTextBox"/>
</form>
      <ag-grid-angular 
      style="position:absolute;padding-left:5%;; bottom:0px;width: 90%; height: 650px;"
      #agGrid  id="myGrid" class="ag-fresh"
      [columnDefs]="columnDefs"
    [animateRows]="true"
    [enableRangeSelection]="true"
    [enableSorting]="true"
    [enableFilter]="true"
    (gridReady)="onGridReady($event)">
      </ag-grid-angular>
  </div>
</div>
</div>

如果有人能帮助我，那就太好了:)

Answer 1

您的 html 文件 ng-model="$myGrid.gridOptions.quickFilterText" 中的语法看起来像是来自 AngularJS，但看起来您正在使用 Angular。您应该先将其更改为 [ngModel].

filter documentation ag-grid 非常详尽。所以我建议你看看那个。您必须在 columnDefs 中指定一些过滤器详细信息，而您的似乎缺少这些详细信息。

这是一个有效的快速过滤器示例：https://plnkr.co/edit/Am65BwIRslbQLfAB4h4I?p=preview

在我的 angular 应用中添加外部 ag-grid 过滤器

Adding external ag-grid filter on my angular app

sorting

filter

ag-grid

angular

angular5