Angular应用程序中的搜索/过滤器将不起作用

Question

问题我想在我的手机中实现搜索功能 fetchemployee.component，我无法正常运行，任何帮助都会 非常感谢。

我在Web控制台中不断收到以下错误，我的搜索过滤器不起作用

ERROR TypeError: "it.toLowerCase is not a function"

这是我的filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
   name: 'filter'
})

export class FilterPipe implements PipeTransform {
   transform(items: any[], term: string): any[] {
       if (!items) return [];
       if (!term) return items;

       term = term.toLowerCase();

       return items.filter(it => {
           return it.toLowerCase().includes(term);
       });
   }
}

这是我的fetchemployee.component.ts

import { Component, Inject } from '@angular/core';

import { Http, Headers } from '@angular/http';

import { Router, ActivatedRoute } from '@angular/router';

import { EmployeeService } from '../../services/empservice.service'

@Component({

   selector: 'fetchemployee',

   templateUrl: './fetchemployee.component.html',

   styleUrls: ['./fetchemployee.component.css']

})

export class FetchEmployeeComponent {

   public empList: EmployeeData[];

   constructor(public http: Http, private router: Router, private
employeeService: EmployeeService) {

       this.getEmployees();

   }

   getEmployees() {

       this.employeeService.getEmployees().subscribe(

           data => this.empList = data

       )

   }

   delete(employeeID) {

       var ans = confirm(`Are you shoure you want to delete this deduction
for: ${employeeID}`);

       if (ans) {

           this.employeeService.deleteEmployee(employeeID).subscribe
((data) => {

               this.getEmployees();

           }, error => console.error(error))

       }

   }
   term: string = "";

}

interface EmployeeData {

   id: number;

   name: string;

   empno: string;

   purtype: string;

   bp: string;

   amount: number;
}

这是我的fetchemployee.component.html

<h1>Employee Deduction</h1>

<p *ngIf="!empList"><em>Loading...</em></p>

<p>

   <a class="btn btn-primary" [routerLink]="['/register-employee']">Create
New</a>

</p>
<input type="text" [(ngModel)]="term">

<div class="wrapper">
   <div class="table" *ngIf="empList">
       <div class="row header">
           <div class="cell">
               Employee Number
           </div>
           <div class="cell">
               Name
           </div>
           <div class="cell">
               Pur. Type
           </div>
           <div class="cell">
               B/P
           </div>
           <div class="cell">
               Amount
           </div>
           <div class="cell">
               Edit
           </div>
           <div class="cell">
               Delete
           </div>
       </div>
       <div class="row" *ngFor="let emp of empList | filter: term">
           <div class="cell" data-title="Employee Number">
               {{ emp.empno }}
           </div>
           <div class="cell" data-title="Name">
               {{ emp.name }}
           </div>
           <div class="cell" data-title="Pur. Type">
               {{ emp.purtype }}
           </div>
           <div class="cell" data-title="B/P">
               {{ emp.bp }}
           </div>
           <div class="cell" data-title="Amount">
               ${{ emp.amount }}
           </div>
           <div class="cell" data-title="Amount">
               <a class="alt" [routerLink]="['/employee/edit/',
emp.id]"></a>
           </div>
           <div class="cell" data-title="Amount">
               <a class="btn-danger" [routerLink]="" (click)="delete
(emp.id)"></a>
           </div>
       </div>
   </div>
</div>

这是我的app.shared.module.ts

import { NgModule } from '@angular/core';
import { EmployeeService } from './services/empservice.service'
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchEmployeeComponent } from
'./components/fetchemployee/fetchemployee.component'
import { createemployee } from
'./components/addemployee/AddEmployee.component'
import { FilterPipe } from "./components/fetchemployee/filter.pipe"

@NgModule({
   declarations: [
       AppComponent,
       NavMenuComponent,
       HomeComponent,
       FetchEmployeeComponent,
       createemployee,
       FilterPipe
   ],
   imports: [
       CommonModule,
       HttpModule,
       FormsModule,
       ReactiveFormsModule,
       RouterModule.forRoot([
           { path: '', redirectTo: 'home', pathMatch: 'full' },
           { path: 'home', component: HomeComponent },
           { path: 'fetch-employee', component: FetchEmployeeComponent },
           { path: 'register-employee', component: createemployee },
           { path: 'employee/edit/:id', component: createemployee },
           { path: '**', redirectTo: 'home' }
       ])
   ],
   providers: [EmployeeService]
})
export class AppModuleShared {
}

这是我的数据的样子

[
   {
       "id": 8,
       "name": "Jeffery Brown",
       "empno": "80",
       "purtype": "TLS",
       "bp": "B",
       "amount": "24.00"
   },
   {
       "id": 9,
       "name": "Robert Blue",
       "empno": "101",
       "purtype": "UNI",
       "bp": "B",
       "amount": "9.32"
   },
]

Answer 1

问题与it的类型为EmployeeData

有关

由于似乎您通常添加FilterPipe，所以您可以根据以下方式传递要过滤的属性名称

export class FilterPipe implements PipeTransform {
   transform(items: any[], prop: string, term: string): any[] {
       if (!items) return [];
       if (!term) return items;

       term = term.toLowerCase();

       return items.filter(it => {
           return it[prop].toLowerCase().includes(term);
       });
   }
}

并将其用作

<div class="row" *ngFor="let emp of empList | filter:'name':term">