我正在 <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。
您知道如何修复上面的代码吗?谢谢。
最佳答案
将您的输入与 name
属性绑定(bind)。
<form id="filter">
<label>Filter people by name:</label>
<input type="text" name="people" [(ngModel)]="term" />
</form>
还要确保您已将 FilterPipe
添加到 NgModule
的声明
。
关于javascript - 如何在 Angular 4 中使用 *ngFor 实现自定义过滤器管道?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43860326/