css - Angular:如何使用查询参数过滤数据表
问题描述
我想使用从另一个组件中的用户输入获得的查询参数来过滤我的表。
我能够获取用户通过输入发送的数据并将其打印到console.log
. 但我不知道如何使用它来过滤表格。
我已经建立了一个过滤器,但由于某种原因我不能调用它。
这是我的过滤器:
import { Pipe, PipeTransform } from "@angular/core";
import { Container } from "./Entites/Container";
@Pipe({
name: 'textFilter'
})
export class textFilter implements PipeTransform {
transform(
containers : Container[],
storageSearch?: any,
clientSearch?: string,
): Container[] {
if (!containers) return [];
if (!storageSearch) return containers;
storageSearch = storageSearch.toLocaleLowerCase();
containers = [...containers.filter(user => user.TAOR_QTSR_EBRI.toLocaleLowerCase() === storageSearch)];
if (!clientSearch) return containers;
clientSearch = clientSearch.toLocaleLowerCase();
containers = [...containers.filter(user => user.LQOCH_SHM_LEOZI_QTSR.toLocaleLowerCase() === clientSearch)];
// if (!roleSearch) return users;
//roleSearch = roleSearch.toLocaleLowerCase();
//users = [...users.filter(user => user.role.toLocaleLowerCase() === roleSearch)];
return containers;
}
}
这是我的组件ngOnInit
,我在那里有一些其他过滤器,例如复选框过滤器:
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
//Paginator
this.dataSource.paginator = this.paginator;
//AutoFilter Form 1st page
this.clientType = this.route.snapshot.queryParamMap.get('clientType');
this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
console.log('The Client name is : '+this.clientType+' '+'The storage Facility is : '+this.storageType);
//CheckBox Filter
this.dataSource.filterPredicate = (data: Container, filter: any) => {
return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
};
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
});
}
我想要完成的是能够使用查询参数过滤表。
解决方案
我们可以将您收到的数据作为输入(在父组件中)传递给applyFilter
子组件内的材料表过滤功能......
相关父 TS:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styles: [`.parent{background:lightgreen; padding:2%;}`],
template: `
Enter string for filtering: <input type='text' [(ngModel)]='inputStr' />
<!-- {{inputStr}} -->
<table-filtering-example [inputStr]='inputStr'>loading</table-filtering-example>
`,
})
export class AppComponent {
inputStr: string = '';
constructor() { }
}
相关儿童 TS :
export class TableFilteringExample implements OnInit, OnChanges {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@Input() inputStr:string;
constructor(){}
ngOnInit(){}
ngOnChanges(){
/* just call the applyFilter button with the data which is passed to your component from it's parent */console.log("(ngOnChanges)this.inputStr:", this.inputStr);
this.applyFilter(this.inputStr);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
在这里完成工作堆栈闪电战
推荐阅读
- java - Spring Cloud Gateway 使连接过早关闭
- javascript - Three.js 错误 - '无法读取未定义的属性'旋转''
- opencart - 如何将 Aramex Shipping 添加到 opencart
- react-native - 调试反应原生项目
- android-studio - 启动 Androir Studio 3.0.1 时出现模拟器错误
- php - 点击广告后如何在页面上发送用户
- java - Jersey Http Server:为每个 http 方法添加参数
- netlogo - Netlogo:[ifelse] 命令/预期命令
- haskell - 为什么我不能在 Stack 项目中使用 Text.Regex?
- javascript - 动态创建多维javascript对象