在我的角度应用程序上添加外部 ag-grid 过滤器答案

【问题标题】：Adding external ag-grid filter on my angular app在我的角度应用程序上添加外部 ag-grid 过滤器
【发布时间】：2018-09-14 07:05:48
【问题描述】：

我正在尝试在我的 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-way binding 使外部按钮工作。

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

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

【问题讨论】：

标签： angular sorting filter angular5 ag-grid

【解决方案1】：

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

ag-grid 的filter documentation 非常全面。所以我建议你看看那个。您必须在您的 columnDefs 中指定一些过滤器详细信息。

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

【讨论】：