Angular ag-grid quick filter 和 angular material chips input clubing 合二为一

Question

下面是我的代码，它在 table 上拉动 ag-grid 和一个搜索内容的快速过滤器。我们可以使用 angular material 个筹码以筹码的形式显示我们在输入框中输入的搜索词。下面是我的代码-

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 它会自动添加 material 外观。

如果你想要不同的外观和感觉，你可能想在之后玩 inspect element 并在 material css 类上执行 ::ng-deep 和自己设计风格。

Angular ag-grid quick filter 和 angular material chips input clubing 合二为一

Angular ag-grid quick filter and angular material chips input clubbing into one

sorting

search

ag-grid

angular

angular5