[英]angular 7 material table - filter is not working properly
I created a page where I am showing angular material table data.我创建了一个页面,在其中显示角度材料表数据。 On top of table data I put a filter input to show the data in filtered format.在表格数据之上,我放置了一个过滤器输入以过滤格式显示数据。 Things are working fine but i observed a strange and unexpected angular behavior.一切正常,但我观察到了一种奇怪且意外的角度行为。 For some of characters, it is showing filtered rows on each key strokes, but for some other characters it does not show rows on keystrokes.对于某些字符,它会在每次击键时显示过滤的行,但对于其他一些字符,它不会在击键时显示行。
listusers.component.html列表users.component.html
<div class="example-container mat-elevation-z8">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" autocomplete="off">
</mat-form-field>
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.index}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="gender">
<th mat-header-cell *matHeaderCellDef> Gender </th>
<td mat-cell *matCellDef="let element"> {{element.gender}} </td>
</ng-container>
<ng-container matColumnDef="score">
<th mat-header-cell *matHeaderCellDef> Score </th>
<td mat-cell *matCellDef="let element"> {{element.score}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
></tr>
</table>
</div>
listusers.component.ts列出users.component.ts
import { Component, OnInit } from '@angular/core';
import { ListService } from '../services/list.service';
import { User } from '../model/user.model';
import { MatTableDataSource } from '@angular/material';
import { FormControl } from '@angular/forms';
@Component({
selector: 'listusers',
templateUrl: './listusers.component.html',
styleUrls: ['./listusers.component.css']
})
export class ListusersComponent implements OnInit {
public users: User[] = [];
displayedColumns = [ 'position','name', 'gender', 'score'];
dataSource: MatTableDataSource<User>;
constructor(private listsrv:ListService) { }
ngOnInit() {
this.loaddata();
if(this.dataSource){
this.dataSource.filterPredicate = (data: User, filtersJson: string) => {
const matchFilter = [];
const filters = JSON.parse(filtersJson);
filters.forEach(filter => {
const val = data[filter.id] == null ? '' : data[filter.id];
matchFilter.push(val.toLowerCase().includes(filter.value.toLowerCase()));
});
return matchFilter.every(Boolean);
};
}
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
console.log('filterValue',filterValue)
}
loaddata(){
this.listsrv.getList()
.subscribe(
result => {
for(var key in result){
this.users.push(result[key])
}
},
error => {console.log(' error',error)},
() => {console.log(this.users)
this.dataSource = new MatTableDataSource(this.users);
}
)
}
}
Some CSS is also there but not sharing as it to reduce the length of ques.一些 CSS 也在那里,但不共享,因为它减少了 ques 的长度。 The data which I am using is coming from a http service call我使用的数据来自 http 服务调用
getList(){return this.http.get(this.url+'/list');}
Which is actually calling a route function on server and returns json object.这实际上是在服务器上调用路由函数并返回 json 对象。
list.route.js list.route.js
const express = require('express');
const router = express.Router();
router.get('/', function(req, res) {
var jsonobj = [
{name:"john",gender:"male", score:345,},
{name:"alice",gender:"female",score:678},
{name:"paul",gender:"male",score:263},
{name:"tia",gender:"female",score:620},
{name:"michel",gender:"male",score:458},
{name:"akbar",gender:"male",score:382},
{name:"simon",gender:"male",score:193},
{name:"albela",gender:"male",score:193}
]
console.log('list route called')
res.send(jsonobj)
})
module.exports = router;
I tried to make project in stackblitz.com and plunker but couldn't replicate issue for some setup related problems.我尝试在 stackblitz.com 和 plunker 中创建项目,但无法复制某些设置相关问题的问题。 I observed the when i press other keys like "t","j","u" etc. then it works but when i press "a" it does not show "alice" and "albela" rows.我观察到当我按下“t”、“j”、“u”等其他键时,它可以工作,但是当我按下“a”时,它不显示“alice”和“albela”行。 i have to keep entering and it shows rows when 3 characters are typed.我必须继续输入,当输入 3 个字符时它会显示行。
It is also not showing any error on console so i have no clue.它也没有在控制台上显示任何错误,所以我不知道。 Please have a look and suggest me.请看一看并建议我。
Thanks谢谢
I found the solution here我在这里找到了解决方案
this.dataSource.filterPredicate was not configured properly and also at wrong place. this.dataSource.filterPredicate 配置不正确,而且位置错误。 My modified listusers.component.ts is as below,我修改过的 listusers.component.ts 如下,
listusers.component.ts列出users.component.ts
import { Component, OnInit } from '@angular/core';
import { ListService } from '../services/list.service';
import { User } from '../model/user.model';
import { MatTableDataSource } from '@angular/material';
import { FormControl } from '@angular/forms';
@Component({
selector: 'listusers',
templateUrl: './listusers.component.html',
styleUrls: ['./listusers.component.css']
})
export class ListusersComponent implements OnInit {
public users;
displayedColumns = [ 'position','name', 'gender', 'score'];
dataSource: MatTableDataSource<User>;
constructor(private listsrv:ListService) { }
ngOnInit() {
this.loaddata();
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
loaddata(){
console.log('in function loaddata')
this.listsrv.getList()
.subscribe(result =>
this.users = result,
error => console.log('Error :',error),
() => { console.log(this.users);
this.dataSource = new MatTableDataSource(this.users);
//added below line
this.dataSource.filterPredicate =
(data: User, filter: string) => data.name.indexOf(filter) != -1;
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.