[英]Array.filter() in Angular 2 Component
In one component I can filter my array using the following:在一个组件中,我可以使用以下内容过滤我的数组:
// Array of product objects
const result = products.filter(p => p.name.includes('val'));
and value of products remains same as the first value but filtered value stores in result
.并且产品的值与第一个值保持相同,但过滤后的值存储在
result
。
But in the following code, filter()
filters array of strings itself:但是在下面的代码中,
filter()
过滤字符串数组本身:
// Array of strings
const result = strs.filter(s => s.includes('val'));
The question is how can I filter strings and return result without modifying the strs
itself?问题是如何在不修改
strs
本身的情况下过滤字符串并返回结果?
Note: I tried with array.filter(function() { return res; });
注意:我尝试使用
array.filter(function() { return res; });
but didn't make any change.但没有做任何改变。
It returns the filtered ones and don't change the actual array.它返回过滤后的数组并且不更改实际数组。 You are doing something wrong
你做错了什么
const strs = ['valval', 'bal', 'gal', 'dalval']; const result = strs.filter(s => s.includes('val')); console.log(strs); console.log(result);
First thing we need to know is, if we filter our list we loose our original data我们需要知道的第一件事是,如果我们过滤列表,我们就会丢失原始数据
products: any[] = [
{
"productId": 1,
"productName": "foo-bar",
"price": 32.99
}
]
and can't get it back without re-getting the data from it's source so we have to make another list to store the filtered list.并且如果不从其源重新获取数据就无法取回它,因此我们必须制作另一个列表来存储过滤后的列表。
filteredProduce: any[];
Next if you are working to show a list of filtered product on a grid or something like this we need a way to know when the user changes the filter criteria.接下来,如果您要在网格上显示过滤产品列表或类似的东西,我们需要一种方法来了解用户何时更改过滤条件。 we could use event binding and watch for key presses or value changes, but an easier way is to change our _listFilter property into a getter and setter, like this
我们可以使用事件绑定并观察按键或值的变化,但更简单的方法是将我们的 _listFilter 属性更改为 getter 和 setter,如下所示
get listFilter: string {
return this._listFilter;
}
set listFilter(value:string) {
this._listFilter= value;
}
next we want to set our filteredProducts array to the filtered list of products like this接下来我们想将我们的filteredProducts数组设置为这样的过滤产品列表
set listFilter(value:string) {
this._listFilter= value;
this.filteredProducts = this._listFilter? this.performFilter(this._listFilter) : this.products;
}
in preceding code we are using js conditional operator to handle the posibility that _listFilterstring is empty, null or undefined.在前面的代码中,我们使用 js 条件运算符来处理 _listFilterstring 为空、null 或未定义的可能性。 Next we use
this.performFilter(this._listFilter)
to filter our list.接下来我们使用
this.performFilter(this._listFilter)
来过滤我们的列表。
performFilter(filterBy: string): any[] {
filterBy = filterBy.toLocaleLowerCase();
return this.products.filter((product: any) =>
product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}
Finally we should assign the main list of products to the filteredProducts and _listFilter to what we want.最后,我们应该将产品的主列表分配给filteredProducts 并将_listFilter 分配给我们想要的。
constructor() {
this.filteredProducts = this.products;
this._listFilter= 'foo-bar';
}
last step is to change our template to bind to our filteredProducts property.最后一步是更改我们的模板以绑定到我们的过滤产品属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.