Question

我有一个ag-grid，它是从.json文件渲染表和外部Quick过滤器，它通过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

根据doc：

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

刷新角度ag-grid数据

1 个答案: