[英]Angular 4 Search filter object
我下面的代码如下
<div class="doctor-content container-fluid">
<div class="options">
<div class="filter col-md-8">
<mat-form-field class="input-filter">
<input matInput placeholder="Name" name="name" [(ngModel)]='doctorName'>
</mat-form-field>
<mat-form-field class="input-filter">
<input matInput placeholder="Clinic" name="clinicName" [(ngModel)]='clinicName'>
</mat-form-field>
<mat-form-field class="input-filter">
<input matInput placeholder="Specialization" name="specialization" [(ngModel)]='specialization'>
</mat-form-field>
</div>
<div class="doctor-list">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Email</th>
<th>Clinic</th>
<th>Specialization</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let list of doctors | filter:doctorName | filter:clinicName | filter:specialization| paginate: { itemsPerPage: 25, currentPage: p }'>
<td class="doctor-image">
<img src="../../assets/images/user_blue.png">
</td>
<td>{{list.firstName}} {{list.lastName}}</td>
<td> </td>
<td>{{list.clinics[0].name}}</td>
<td>{{list.specializations[0].name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
搜索过滤器仅适用于firstName,不适用于诊所名称和专业名称。 有人可以帮我用吗
"ng2-search-filter": "^0.3.1",
您必须自己编写或根据需要更改ng2-search-filter,例如
HTML:
<tbody>
<tr *ngFor='let list of doctors | filter: doctorName : clinicName : specialization | paginate: { itemsPerPage: 25, currentPage: p }'>
<td class="doctor-image">
<img src="../../assets/images/user_blue.png">
</td>
<td>{{list.firstName}} {{list.lastName}}</td>
<td> </td>
<td>{{list.clinics[0].name}}</td>
<td>{{list.specializations[0].name}}</td>
</tr>
管:
@Pipe({
name: 'filter',
pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {
transform(items: any, args:string[]): any {
if (!term || !items) return items;
return Ng2SearchPipe.filter(items, args);
}
static filter(items: Array<{ [key: string]: any }>, args:string[]): Array<{ [key: string]: any }> {
const toCompare1 = args[0].toLowerCase();
const toCompare2 = args[1].toLowerCase();
const toCompare3 = args[2].toLowerCase();
return items.filter(function (item: any) {
for (let property in item) {
if (item[property] === null) {
continue;
}
if (item[property].toString().toLowerCase().includes(toCompare1) || item[property].toString().toLowerCase().includes(toCompare2) || item[property].toString().toLowerCase().includes(toCompare3) || ) {
return true;
}
}
return false;
});
}
}
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.