[英]Angular4 search filter functionality on Entire table
在這里我在表上實現了小型搜索過濾器,但是我的要求是它應該在整個表中而不是在頁面中搜索整個表嗎?
搜索
<label> Search FRom Table:</label> <input (change)="someval($event.target.value)">
someval(value){
let data=JSON.stringify(value);
console.log(data.length);
this.auction.find(e=>e.uniqueid=data);
this.GetDashBoardData();
}
GetDashBoardData(){
var somedata= this.globalService.getBasicInfoData();
this.auctionRequest = {
"loginId": this.userdata.LoginID
};
return this.httpService.dashbordTheUser2(this.auctionRequest).subscribe((response) => {
this.auction = response.data;
}
在這里我略有變化,例如當我在文本框中輸入一些文本時,它在This.auction數組中為fing,但是我不知道如何在表中綁定它
<tr *ngFor="let value of pagedItems">
<td>{{value.name}}</td>
您可以嘗試此解決方案
我已經在stackblitz上創建了一個演示
搜索管道
transform(value: any, args?: any): any {
if (!args) {
return value;
}
return value.filter((val) => {
let rVal = (val.id.toLocaleLowerCase().includes(args)) || (val.email.toLocaleLowerCase().includes(args));
return rVal;
})
}
HTML代碼
<tr *ngFor="let customer of users | customerEmailFilter:email;let i = index">
<th scope="row">{{i+1}}</th>
<td>{{customer.id}}</td>
<td>{{customer.email}}</td>
</tr>
ts文件代碼
users=[{
id:'123',
email:'abc@gmail.com'
},{
id:'1234',
email:'xyz@hotmail.com'
},{
id:'12345',
email:'jsgsbh@kk.com'
},{
id:'123456',
email:'test@gmail.com'
}]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.