如何解决ng2 搜索管道一列过滤器
我在我的 Angular 8(是的,我知道...)项目中使用 ng2 搜索管道来过滤搜索结果。 问题是搜索应用于我所有表的列,我只希望它过滤项目名称。
这是我的搜索栏:
<input type="search" class="m-auto form-control" placeholder="Search" [(ngModel)]="rechercheprojets">
还有我的桌子:
<tbody>
<tr *ngFor="let hrProject of (hrPointagesProjects1 | filter:rechercheprojets)">
<td>
<i class="material-icons">assignment</i>
{{ hrProject.Project }}
</td>
<td>
<i class="material-icons team-list" data-toggle="tooltip" data-placement="top" title="{{ hrProject.Teams }}">person</i>
{{ hrProject.Teams | slice:0:20 }}
</td>
<td class="text-right">
<div class="progress-container">
<span class="progress-badge" *ngIf="!cfgHoursDivided">
<i class="material-icons">show_chart</i>
{{ hrProject.Hours/8 | number:'1.1-1' }} J<span *ngIf="hrProject.StatAllocated>0"> / {{ hrProject.StatAllocated/8 | number:'1.1-1' }} J</span>
</span>
<span class="progress-badge" *ngIf="cfgHoursDivided">
<i class="material-icons">show_chart</i>
{{ hrProject.Hours | number:'1.1-1' }} h<span *ngIf="hrProject.StatAllocated>0"> / {{ hrProject.StatAllocated | number:'1.1-1' }} h</span>
</span>
<div class="progress" *ngIf="hrProject.StatAllocated>0">
<div class="progress-bar" role="progressbar" [class.progress-bar-success]="hrProject.Hours/hrProject.StatAllocated<0.8" [class.progress-bar-warning]="hrProject.Hours/hrProject.StatAllocated>=0.8 && hrProject.Hours/hrProject.StatAllocated<0.9" [class.progress-bar-danger]="hrProject.Hours/hrProject.StatAllocated>=0.9" style.width="{{ hrProject.Hours *100 / hrProject.StatAllocated | number:'1.0-0' }}%">
</div>
</div>
</div>
</td>
<td class="td-actions text-right">
<!--<button type="button" rel="tooltip" class="btn btn-info">
<i class="material-icons">person</i>
</button> -->
<button type="button" class="btn btn-warning" routerLink="/projects/edit/{{ hrProject.id }}">
<i class="material-icons">edit</i> <!-- data-toggle="tooltip" data-placement="top" title="Editer" -->
</button>
<button *ngIf="hrProject.Type=='P'" type="button" class="btn btn-danger" (click)="hrProjectArchiveDel(hrProject.id)">
<i class="material-icons">archive</i><!-- data-toggle="tooltip" data-placement="top" title="Archiver" -->
</button>
<button *ngIf="hrProject.Type=='A'" type="button" data-toggle="tooltip" data-placement="top" title="Restaurer" class="btn btn-success" (click)="hrProjectUnArchive(hrProject.id)">
<i class="material-icons">unarchive</i>
</button>
</td>
</tr>
</tbody>
希望这些信息对你有帮助...所以你可以帮助我:)
解决方法
为此,您可以创建自定义管道,如下所示 管道:my-filter.pipe.ts
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name: 'myFilter'
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[],keyword: any,properties: string[]): any[] {
if (!items) return [];
if (!keyword) return items;
return items.filter(item => {
var itemFound: Boolean;
for (let i = 0; i < properties.length; i++) {
if (item[properties[i]].toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
itemFound = true;
break;
}
}
return itemFound;
});
}
}
在模板中要使用此管道的位置
<input type="search" class="form-control filter-list-input" placeholder="Filter"
aria-label="Filter" name="search" [(ngModel)]="searchText" >
<div *ngFor="let itemof myItems | myFilter:searchText:['firstPropertyName','secondPropertyName']; let i = index">...
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。