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

我正在

标签上使用自定义过滤管。用户只需在

中键入一个术语，列表就会像搜索功能一样进行过滤

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>

过滤管

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

  }

}

每当我在

标记中键入名称时，带有*ngFor的列表不会根据键入的单词进行过滤

我使用的是Angular 4.1.1

---

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

将您的输入绑定到

name

属性

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

按姓名筛选人员：

---

还要确保您已经将

FilterPipe

添加到

NgModule

的

声明中

@pengy工作得很有魅力！

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