[英]filter a list of strings dynamically
如何动态过滤字符串列表?
我发现了带有ng-repeat
示例,但不适用于angular 7 :它不加载任何字符串,仅适用于ngFor
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Find ticket</div>
</div>
<input class="form-control" placeholder="Insert ticket to find" [(ngModel)]="find_text">
</div>
<ul class="list-group" style="max-height: 200px; overflow: auto;">
<li class="list-group-item" *ngFor="let s of find_text">{{s.Value}}</li>
</ul>
您将find_text绑定为ngModel中的字符串和* ngFor指令中的Objects列表。 我认为这是您要问的:
public text; private word_list = [{value:"Apple"}, {value:"Banana"}, {value:"Pear"}, {value:"Bluebarry"}] get find_text(){ return this.word_list.filter(x => x.value.toLowerCase().includes(text.toLowerCase())); }
<div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">Find ticket</div> </div> <input class="form-control" placeholder="Insert ticket to find" [(ngModel)]="text"> </div> <ul class="list-group" style="max-height: 200px; overflow: auto;"> <li class="list-group-item" *ngFor="let s of find_text">{{s.value}}</li> </ul>
借助管道
HTML代码:
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Find ticket</div>
</div>
<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"
autocomplete="off">
</div>
<ul class="list-group" style="max-height: 200px; overflow: auto;">
<li class="list-group-item" *ngFor="let s of word_list| filterForUser : searchText">{{s.value}}</li>
</ul>
过滤:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items || !searchText) return items;
searchText = searchText.toLowerCase();
// return items.filter(it => {
return items.filter((data) => this.matchValue(data,searchText));
// });
}
matchValue(data, value) {
return Object.keys(data).map((key) => {
return new RegExp(value, 'gi').test(data[key]);
}).some(result => result);
}
}
零件:
private word_list = [{value:"Chiku"}, {value:"Apple"}, {value:"Banana"}, {value:"Pear"}, {value:"Bluebarry"}]
注意 :请在您的应用模块中声明FilterPipeForUserSearch
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.