角度 ag-grid 不起作用

Question

我有一个 ag-grid，它从 .json 文件呈现表格，并使用快速过滤器完成搜索。搜索词在过滤器下方以角料片的形式显示。

如果我们关闭显示搜索结果的芯片并使用芯片在其中包含多个过滤器，我正在努力将 ag-grid 重新加载到其默认状态。

这是我的示例代码，但我正在努力设置它。

HTML-

<div class="container">
<mat-form-field class="demo-chip-list"  *ngIf="gridApi">              
<mat-chip-list #chipList>
<div style="width:100%; margin-left:10%;"><label><span class="search-button">Search Funds</span></label><input class="search-input"  
[ngModel]="filterText"(ngModelChange)="gridApi.setQuickFilter($event)" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"                   [matChipInputAddOnBlur]="addOnBlur"                     (matChipInputTokenEnd)="add($event)" /></div><br/><div style="width:100%; margin-left:10%;"><mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" 
                      [removable]="removable" (click)="onGridReady(params)" (remove)="remove(fruit)">
               {{fruit.name}}
<mat-icon matChipRemove *ngIf="removable"  ><sup>x</sup></mat-icon></mat-chip></div></mat-chip-list></mat-form-field>
<div class="header" style="display:inline"></div><div> <ag-grid-angular 
      style="position:absolute;padding-left:5%; bottom:0px;width: 90%; height: 350px;" #agGrid  id="myGrid" class="ag-fresh" [columnDefs]="columnDefs" [animateRows]="true" [enableRangeSelection]="true" [enableSorting]="true" [enableFilter]="true" [pagination]="true" (gridReady)="onGridReady($event)">
      </ag-grid-angular></div></div>

这是我的 Component.ts：

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 { MatChipInputEvent } from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';
import "ag-grid-enterprise";
@Component({
  selector: 'app-funds-table',
  templateUrl: './funds-table.component.html',
  styleUrls: ['./funds-table.component.css']
})

export class FundsTableComponent implements OnInit {

  visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;

  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  fruits = [
    { name: 'ABC' }

  ];
  add(event: MatChipInputEvent): void {
    let input = event.input;
    let value = event.value;

    // Add our fruit
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }
  remove(fruit: any): void {
    let index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
  private gridApi;
  private gridColumnApi;
  private columnDefs;
  private filterText = "";
  ngOnInit() {}
constructor(private http: HttpClient) {
    this.columnDefs = [{headerName: "Ticker", field: "Ticker"},
      {headerName: "Id", field: "Id"},
     {headerName: "Utilities", field: "Utilities"}
    ];
  }

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

Answer 1

代码显示不好，但我可以想象，当你移除芯片时，你可以将filterText设置为''并调用gridColumnApi.setQuickFilter。

setQuickFilter('') 将返回原始网格数据。