我已经为项目创建了一个自定义管道,并将我的管子文件包括在声明数组中的模块中。
search-user.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import {
User
} from './user';
@Pipe({
name: 'searchUser'
})
export class SearchUserPipe implements PipeTransform {
constructor() {
console.log('imported');
}
transform(items: User[], filter: User): User[] {
console.log('inside transform');
if (!items || !filter) {
return items;
}
return items.filter((item: User) => this.applyFilter(item, filter));
}
applyFilter(user: User, filter: User): boolean {
for (const field in filter) {
if (filter[field]) {
if (typeof filter[field] === 'string') {
if (user[field].toLowerCase().indexOf(filter[field].toLowerCase()) === -1) {
return false;
}
} else if (typeof filter[field] === 'number') {
if (user[field] !== filter[field]) {
return false;
}
}
}
}
return true;
}
}
我在pipe.ts
中使用的用户模型export class User {
studentId: Number;
name: String;
email: String;
phoneNumber: String;
}
这是我的HTML文件,我需要在其中使用管道
对数据进行排序<div *ngIf="dataLoaded" class="table-responsive">
<table #myTable class="table">
<thead>
<tr>
<th><input type="text" name="title" [(ngModel)]="filter.studentId" placeholder="ID"></th>
<th><input type="text" name="title" [(ngModel)]="filter.name" placeholder="NAME"></th>
<th><input type="text" name="title" [(ngModel)]="filter.email" placeholder="EMAIL"></th>
<th><input type="text" name="title" [(ngModel)]="filter.phoneNumber" placeholder="PHONE NUMBER"></th>
</tr>
</thead>
<tbody>
<tr id={{i}} *ngFor="let user of userDetails;let i of index | searchUser: filter">
<td>{{user.studentId}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phoneNumber}}</td>
</tr>
</tbody>
</table>
</div>
我正在尝试为表的每一列创建过滤器。我还通过将某些内容记录到文件的构造函数中,检查了我的管子文件是否在我的捆绑包中导入。
我被困在这里,管道不适用于任何字段。
我认为您在html中使用了错误的语法ngfor。尝试这个
*ngFor="let user of userDetails | searchUser: filter; index as i;">