我正在尝试创建一个输入字段,通过“描述”属性名称过滤使用 ngFor 生成的列表。该列表是一个像这样的对象:
[
{ code: 001, description: "Product 001 description" },
{ code: 002, description: "Product 002 description" },
{ code: 003, description: "Product 003 description" },
{ code: 004, description: "Product 004 description" }
]
我的功能:
seachFilterData(e) {
const query = e;
this.filterData.map((items) => Object.values(items).forEach(value => {
return Object.keys(value).filter(k => {
if (value.toLowerCase().includes(query.toLowerCase())) {
return items;
}
});
}));
}
HTML:
<input type="text" class="tokenfield-search" placeholder="search" [ngModel]="searchFilter" value="" (ngModelChange)="seachFilterData($event)">
<div class="tokenfield-list">
<ul>
<li *ngFor="let data of filterData | keys">
当我console.log(items)
时,它正在过滤,但列表不会改变。有什么想法吗?
最佳答案
如果您知道只需要按描述进行过滤,则可以仅在该字段上与 indexOf
进行比较,并根据需要进行过滤。
seachFilterData(e) {
const query = e;
// convert to lowercase to do case insensitive search
const query = e.toLowerCase();
this.filterData = this.filterData.filter(item => item.description.toLowerCase().indexOf(query) !== -1);
}
如果您的查询是产品 001
,您的过滤列表 (filterData
) 将为
[
{ code: 001, description: "Product 001 description" }
]
关于javascript - 如何使用 ngModelChange 过滤 Angular 4 中的对象值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47519258/