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

Question

我正在 <li></li> 上使用自定义过滤管标签。用户只需在<input>中输入一个术语即可。并且列表像搜索功能一样被过滤。

测试.组件.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>

测试.组件.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() {
  }

}

过滤器.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 属性绑定(bind)。

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

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