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