角ag-grid快速过滤器和角形材料芯片输入杵状体合二为一

Question

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

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>

组件：

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);
      });

Answer 1

我认为您想混合这两种实现。

    <mat-form-field class="demo-chip-list" class`enter code here`="search-box" *ngIf="gridApi">
                
        <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 class="search-input"  
                         [ngModel]="filterText" 
                         (ngModelChange)="gridApi.setQuickFilter($event)" 
                         placeholder="Filter Table..."/
                         [matChipInputFor]="chipList"
                         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                         [matChipInputAddOnBlur]="addOnBlur"
                         (matChipInputTokenEnd)="add($event)" />
         </mat-chip-list>
     </mat-form-field

但是您会看到 mat-form-field 会自动添加材质外观。

如果您想要不同的外观和感觉，您可能想在之后玩检查元素并在材质 css 类上执行 ::ng-deep 并自己设置样式。