カスタム角度データテーブルのカラムによるフィルタリング

Question

私は再利用可能な角度データテーブルコンポーネントを作成しています。ここでは、カラム単位でフィルタリングすることができます。今、私のアプローチはうまくいきますが、これはAngularのベストプラクティスではないと心配しています。入力をクリックしてフィルターパイプでその特定の列を「selectColInput」に追加する以外に、個々の列をフィルターに掛ける別の方法がありますか？あなたが設定しngModelChangeを使用することができます

データ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)="selectColInput(col.value)"/>