Angular 角形ag栅格快速过滤器和角形材料芯片将棒状物输入到其中

下面是我的代码，它将ag网格拉到一张表上，还有一个快速过滤器，可以搜索内容。我们可以使用角材料芯片以芯片的形式显示输入框中输入的搜索词吗。下面是我的代码-

HTML：这是HTML代码，目前有两个输入，一个用于快速过滤，另一个用于显示芯片，我想将这两个输入组合成一个，并将输入的文本显示为芯片，将在下面显示的网格中搜索

<div class="search-box"  *ngIf="gridApi"><p>Search</p><span class="search-button"><label>Search funds:</label></span>
    <input class="search-input"  [ngModel]="filterText" (ngModelChange)="gridApi.setQuickFilter($event)" placeholder="Filter Table..."/>
  </div>

  <mat-form-field class="demo-chip-list">
    <mat-chip-list #chipList>
      <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
               [removable]="removable" (remove)="remove(fruit)">
        {{fruit.name}}
        <mat-icon matChipRemove *ngIf="removable"><sup>x</sup></mat-icon>
      </mat-chip>
      <input 
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             [matChipInputAddOnBlur]="addOnBlur"
             (matChipInputTokenEnd)="add($event)" />
    </mat-chip-list>
  </mat-form-field>

---

我认为您需要混合这两种实现

{{fruit.name}
x
我认为您需要混合这两种实现



{{fruit.name}
x
visible: boolean = true;
  selectable: boolean = true;
  removable: boolean = true;
  addOnBlur: boolean = true;

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

  fruits = [
    { name: 'Lemon' },
    { name: 'Lime' },
    { name: 'Apple' },
  ];


  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 = "";

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

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