gpt4 book ai didi

angular - MatTable 上的多个过滤器

转载 作者:太空狗 更新时间:2023-10-29 17:43:08 24 4
gpt4 key购买 nike

我一直在尝试应用多列过滤,即列标题中的文本输入将仅过滤列的内容。到目前为止,我已经能够通过覆盖 filterPredicateMatTableDataSource 但是一旦我覆盖了跨列的默认过滤就不再有效。

export class TableFilteringExample implements OnInit
{
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);

positionFilter = new FormControl();
nameFilter = new FormControl();

filteredValues =
{
position: '',
name: '',
weight: '',
symbol: ''
};

ngOnInit()
{
this.positionFilter.valueChanges.subscribe((positionFilterValue) =>
{
this.filteredValues['position'] = positionFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});

this.nameFilter.valueChanges.subscribe((nameFilterValue) =>
{
this.filteredValues['name'] = nameFilterValue;
this.dataSource.filter = JSON.stringify(this.filteredValues);
});

this.dataSource.filterPredicate = this.customFilterPredicate();
}

applyFilter(filterValue: string)
{
this.dataSource.filter = filterValue.trim().toLowerCase();
this.dataSource.filter = filterValue;
}

customFilterPredicate()
{
const myFilterPredicate = function(data: PeriodicElement, filter: string): boolean
{
let searchString = JSON.parse(filter);

return data.position.toString().trim().indexOf(searchString.position) !== -1 && data.name.toString().trim().toLowerCase().indexOf(searchString.name)!== -1;
}

return myFilterPredicate;
}
}

我正在寻找的是一旦应用了列过滤器,默认过滤器应该更新现有的过滤条件并返回进一步过滤的数据。

StackBlitz

最佳答案

我想你只是忘了为 searchString.name 调用 toLowerCase()

data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase())!== -1;


编辑:一种方法是在您的组件类中创建一个全局过滤器字段。

globalFilter = '';

<mat-form-field>
<input matInput [ngModel]="globalFilter" (ngModelChange)="applyFilter($event)" placeholder="Filter">
</mat-form-field>

applyFilter(filter) {
this.globalFilter = filter;
this.dataSource.filter = JSON.stringify(this.filteredValues);
}

然后尝试在其他字段之前先使用全局过滤器进行过滤。

  customFilterPredicate() {
const myFilterPredicate = (data: PeriodicElement, filter: string): boolean => {
var globalMatch = !this.globalFilter;

if (this.globalFilter) {
// search all text fields
globalMatch = data.name.toString().trim().toLowerCase().indexOf(this.globalFilter.toLowerCase()) !== -1;
}

if (!globalMatch) {
return;
}

let searchString = JSON.parse(filter);
return data.position.toString().trim().indexOf(searchString.position) !== -1 &&
data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase()) !== -1;
}
return myFilterPredicate;
}

这是工作应用程序: https://stackblitz.com/edit/angular-hbakxo-5jeaic

关于angular - MatTable 上的多个过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52007176/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com