要在Angular + Material Table中实现拖放行并使用管道过滤器,可以按照以下步骤操作:
npm install @angular/cdk @angular/material @ngrx/store @ngrx/effects
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatTableModule } from '@angular/material/table';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { MatTableDataSource } from '@angular/material/table';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filter: string): any[] {
if (!items || !filter) {
return items;
}
return items.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()));
}
}
export class YourComponent {
displayedColumns: string[] = ['name', 'age', 'gender'];
dataSource = new MatTableDataSource([
{ name: 'John Doe', age: 25, gender: 'Male' },
{ name: 'Jane Smith', age: 30, gender: 'Female' },
{ name: 'Tom Johnson', age: 35, gender: 'Male' }
]);
filterValue: string;
drop(event: CdkDragDrop) {
moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
}
}
{{ column }}
{{ element[column] }}
...
现在,当你输入过滤条件时,表格将根据条件来过滤数据。你还可以通过拖放表头来重新排序列。