[英]Filtering table data for multiple columns Angular 10
I need to filter the table data according to the value I set in the input on keyup
event.我需要根据我在keyup
事件的输入中设置的值来过滤表数据。 As there are multiple columns, filtered data should be displayed accordingly.由于有多个列,因此应相应显示过滤后的数据。
In my html I have below在我的 html 我有以下
<tr>
<td *ngFor="let t of tableHeader">
<input type="text" [id]="t.key" (keyup)="inputChange($event)">
</td>
</tr>
My TS file is as below我的 TS 文件如下
public inputChange(value) {
var prevData = this.dataSource;
if (this.selectedId == '') {
prevData = this.result;
}
else if (this.selectedId != '' && this.selectedId != value.target.id) {
prevData = this.result;
}
if (this.selectedId != '' && filterValue.target.value == '') {
this.result = prevData;
return;
}
this.selectedId = value.target.id;
this.inputValue = value.target.value;
var filteredData = this.result.filter(x => x[this.selectedId] && x[this.selectedId].toString().toLowerCase().includes(this.inputValue.toLowerCase()));
this.result = filteredData;
}
So far I have done this and get data filtered accordingly, but when I remove a value from a particular filter input, it loads the data source.到目前为止,我已经完成了此操作并相应地过滤了数据,但是当我从特定过滤器输入中删除一个值时,它会加载数据源。
Expected: to display the previously filtered data instead of the data source.预期:显示之前过滤的数据而不是数据源。
To achieve this I would use below steps using rxjs
为此,我将使用以下步骤使用rxjs
datasource
as an Observable
将datasource
定义为Observable
dataSource = [
{
firstname: "James",
lastname: "Amstrong",
othernames: "Angel",
age: 35
},
{
firstname: "John",
lastname: "Peter",
othernames: "Ava",
age: 43
},
...
]
We will convert this datasource
to an observable using of
from 'rxjs'
我们将使用 from 'rxjs'
将此datasource
转换of
observable
Observable
将过滤器定义为Observable
tableHeader = [
{
key: "firstname"
},
{
key: "lastname"
},
...
];
filterKeyValues = this.tableHeader.map(({ key }) => ({ key, value: "" }));
filterSubject$ = new BehaviorSubject(this.filterKeyValues)
filter$ = this.filterSubject$.asObservable()
This simply generates an Observable
with the structure这只是生成一个具有结构的Observable
Observable<[{ key: firtname, value: ''}, { key: lastname, value: ''}, ...]>
Observable
as the new filtered data将两者结合并返回一个新的Observable
作为新的过滤数据dataSource$ = combineLatest([
this.filter$, of(this.dataSource)
]).pipe(
map(([filter, dataSource]) =>
dataSource.filter(item =>
filter.every((value) =>
(new RegExp(String(value.value).toLowerCase())).test(String(item[value.key]).toLowerCase())
)
)
)
)
inputChange
为inputChange
定义处理程序 public inputChange(event: any, key) {
this.filterKeyValues.find(({key: testKey}) => testKey === key).value = event.target.value
this.filterSubject$.next(this.filterKeyValues)
}
async
to display the contents使用async
显示内容<table>
<tr>
<td *ngFor="let t of tableHeader">
<input type="text" [id]="t.key" (keyup)="inputChange($event, t.key)">
</td>
</tr>
<tr *ngFor="let item of dataSource$ | async">
<td>{{ item.firstname }}</td>
<td>{{ item.lastname }}</td>
<td>{{ item.othernames }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
We are calling the next value.我们正在调用下一个值。 this will force a change detection and datasorce$
Observable
will be reevaluated causing an update in the UI这将强制进行更改检测,并且datasorce$
Observable
将被重新评估,从而导致 UI 中的更新
I have made a Demo Here to illustrate this approach我在这里做了一个演示来说明这种方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.