角度自定义管道不起作用

法赞拜格

我为项目创建了一个自定义管道,并将管道文件包括在声明数组中的模块中。

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>

我正在尝试为表的每一列创建过滤器。我还通过将某些内容登录到文件的构造函数中来检查我的管道文件是否已导入到捆绑包中。

我被困在这里,管道在任何领域都不起作用。

Mixalloff

我认为您在HTML中使用了错误的语法ngFor。试试这个

*ngFor="let user of userDetails | searchUser: filter; index as i;"> 

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章