刷新角度农业网格数据

Question

我有一个ag-grid，它从.json文件渲染表，还有一个外部快速过滤器，它通过ag-grid搜索过滤器上的键输入。 在有人搜索之后，搜索词以带有“ X”符号的角形材料芯片的形式显示，以关闭具有移除功能的芯片。 一旦有人取消/关闭芯片，并且要使用该芯片在其中包含多个过滤器，我想将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({
  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



("/fundsData/fund_info.json". )
.subscribe
(data => 
{this.gridApi.setRowData(data);
});
}
}

Answer 1

根据文档 ：

您可以通过直接api调用api.setQuickFilter('');来重置过滤器api.setQuickFilter(''); -空用于重置过滤器