如何在 Angular 4 中使用 *ngFor 实现自定义过滤器管道？

Question

我在 <li></li> 标记上使用自定义过滤器管道。用户只需在<input> 中输入一个术语，列表就会像搜索功能一样被过滤。

test.component.html

<form id="filter">
    <label>Filter people by name:</label>
    <input type="text" [(ngModel)]="term" />
</form>

<ul id="people-listing">
    <li *ngFor="let person of people | filter:term">
        <div class="single-person">

            <span [ngStyle]="{background: person.belt}">{{person.belt}} belt</span>

            <h3>{{person.name}}</h3>
        </div>
    </li>
</ul>

test.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FilterPipe } from '../filter.pipe';

@Component({
  selector: 'app-directory',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {


  people = [

     {name: "Yoshi", belt: "black"},
     {name: "Ryu", belt: "red"},
     {name: "Crystal", belt: "purple"}


  ];

  constructor() { 

  }

  ngOnInit() {
  }

}

filter.pipe.ts

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(people: any, term: any): any {

    //check if search term is undefined
    if(term === undefined) return people;
    //return updates people array
    return people.filter(function(thisperson){
        return thisperson.name.toLowerCase().includes(term.toLowerCase());
    }) 

  }

}

每当我在 <input> 标记中输入名称时，带有 *ngFor 的列表不会根据输入的单词进行过滤。

我正在使用 Angular 4.1.1。

您知道如何修复上面的代码吗？谢谢。

Answer 1

将您的输入与name 属性绑定。

<form id="filter">
  <label>Filter people by name:</label>
  <input type="text" name="people" [(ngModel)]="term" />
</form>

还要确保您已将 FilterPipe 添加到 declarations 的 NgModule。