Question

我正在制作一个可重复使用的Angular数据表组件，您可以按列过滤。现在，我的方法有效，但我担心这不是Angular的最佳实践。是否有另一种方法来过滤单个列，而不是将该特定列添加到＆＃34; selectColInput＆＃34;点击输入，然后在过滤管道中使用它？

data-table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
                <input type="text"
                [(ngModel)]=fields[col.value] 
                (click)="selectColInput(col.value)"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data | filter: fields:selectedInput">
        <tr>
            <td *ngFor="let col of cols">{{row[col.value]}}</td>
        </tr>
    </tbody>
</table>

数据table.component.ts

import { ColumnsComponent } from './../columns/columns.component';
import { Component, Input } from '@angular/core';
import { FilterPipe } from './filter.pipe';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})

export class DataTableComponent  {

  @Input() data
  cols: ColumnsComponent[] = []
  selectedInput: string = ''
  fields: any = {}

  selectColInput(col) {
    this.selectedInput = col
  }

  addColumn(column) {
    this.cols.push(column)
  }

}

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(data: any, fields: any, selectedInput: any): any {
    if(!data) return;

    return data.filter( row => {
      if(row[selectedInput] !== null && row[selectedInput] && fields[selectedInput]){
        return row[selectedInput].toLowerCase().includes(fields[selectedInput].toLowerCase())
      }
      return true
    })
  }

}

Answer 1

您可以使用ngModelChange设置过滤器变量而无需点击。

(ngModelChange)="selectColInput(col.value)"/>

在自定义Angular数据表中按列过滤

1 个答案: