在我的angular应用程序中添加外部ag网格过滤器

我正试图在我的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双向绑定使外部按钮正常工作

<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>

概述
风险

---

如果有人能帮助我，那就太好了：）

您的html文件

ng model=“$myGrid.gridOptions.quickFilterText”

中的语法看起来像是来自AngularJS，但看起来您使用的是AngularJS。您应该首先将其更改为[ngModel]

对于ag网格来说，这是非常彻底的。所以我建议你看看这个。您必须在columnDefs中指定一些筛选器详细信息，而您的中似乎缺少这些信息

下面是一个工作快速过滤器示例：