2017-12-27 192 views
-1

我正在製作一個可重複使用的Angular數據表組件,您可以按列進行過濾。現在,我的方法可行,但我擔心這不是Angular的最佳做法。是否有另一種方法來過濾單個列,而不是在單擊輸入時將該特定列添加到「selectColInput」,然後在過濾器管道中使用該列?按自定義角度數據表中的列進行過濾

數據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 
    }) 
    } 

} 

回答

0

可以使用ngModelChange設置過濾器變量沒有點擊。

(ngModelChange)="selectColInput(col.value)"/> 
相關問題