angular - 带管道过滤器的角度搜索框

Question

我正在尝试使用管道过滤器，所以我可以按名称搜索所有部门，但我不明白我做错了什么。

import  {Pipe, PipeTransform} from '@angular/core';
import { Department } from '../department';
@Pipe({
  name: 'depfilter'
})
export class DepFilterPipe implements PipeTransform {
  transform(departments:Department[],searchDep:string):Department[] {
    if(!departments|| !searchDep){
      return departments;
    }
    return departments.filter(department=>department.name.toLowerCare().indexOf(searchDep.toLowerCase())!==-1)
  }
}

这是我的管道文件，然后是部门文件夹： 在此处输入图像描述

这是我在部门.component.html 和部门.component.ts 中的代码

<div  class="container">
<h2> Departments </h2>
<p class="info"> To update any of the departments you should click on the name of the department.</p>
<p class="search">Search a name of Department:</p>
<input [(ngModel)]="searchDep" placeholder="Type a department you are looking for">

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col"> Department ID</th>
      <th scope="col">Department name</th>
      <th scope="col">Location</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let department of departments | depfilter : searchDep">
      <th scope="row">{{ department.id}}</th>
      <td><a class="link" routerLink="/Depdetail/{{department.id}}">{{ department.name }}</a></td>
      <td>{{ department.location }}</td>


      <td> <button class="delete" title="delete department"
      (click)="delete(department)">delete</button></td>
    </tr>
  </tbody>
</table>



  <a class="adddepartment" routerLink="/addDept"> New Department </a>

</div>

这里我只有 searchDep:string

import { Component, OnInit } from '@angular/core';
import { Departments } from '../departments';

import { Department } from '../department';
import { DepartmentService } from '../department.service';
@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  styleUrls: ['./departments.component.css']
})
export class DepartmentsComponent implements OnInit {

  departments: Department[];
  searchDep: string;

  constructor(private departmentService: DepartmentService) { }

  ngOnInit() {
    this.getDepartments();
  }

  getDepartments(): void {
    this.departmentService.getDepartments().
    subscribe(departments => this.departments = departments);
  }
  delete(department: Department): void {
    this.departments = this.departments.filter(d => d !== department);
    this.departmentService.deleteDepartment(department);
  }
}

标签： angulartypescript