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

Question

I am using a custom filter pipe on a <li></li> tag. The user will just type a term in the <input> and the list is filtered like a search function.

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());
    }) 

  }

}

Whenever I type a name in the <input> tag, the list with *ngFor is NOT filtered according to the typed word.

I am using Angular 4.1.1.

Do you have any idea how to fix the code above? Thanks.

Answer 1

bind your input with name property.

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

Also make sure you have add FilterPipe to declarations of NgModule .

Answer 2

感谢您的时间，但有一些错误，您还必须在@component 文件 test.component.ts 中指定过滤器的定义位置，您尝试导入它但您没有使用它。