当存在输入字段时，离子阵列不进行过滤

Question

我正在为我的ionic应用程序和firebase firestore实现搜索过滤器功能，但过滤器似乎不起作用。我一直在尝试很多方法，但似乎都不起作用。如果有人能帮我，我将不胜感激…谢谢。。

在此键入脚本代码

recipeData: any = [];
constructor(private recipeService: RecipeService) { 
this.initializeData();
}
initializeData() {
// Getting recipe data from database
this.recipeService.getAllRecipes().subscribe((data)=>{
this.recipeData = data;
});
}
filter(ev : any) {
// Filtering code
this.initializeData();
const val = ev.target.value;
if(val && val.trim() !== ''){
this.recipeData = this.recipeData.filter((item) => {
return(item.Name.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
}

此处的HTML代码

<ion-list>
<ion-item *ngFor = "let item of recipeData">
{{item.Name}}
</ion-item>
</ion-list>

Answer 1

您正在从filter方法调用this.initializeData()，这就是问题所在。

每次你调用你的过滤方法initializeData方法都被执行了，在initializeDData方法中，你调用的是rest api，它需要时间来获取数据，在rest之前，将数据发送到你在过滤方法中this.initializeData()下面的getAllRecipes()代码的子部分，从而执行

const val = ev.target.value;
if(val && val.trim() !== '') {
this.recipeData = this.recipeData.filter((item) => {
return(item.Name.toLowerCase().indexOf(val.toLowerCase()) > -1);
});

然后在订阅代码得到执行之后

getAllRecipes().subscribe((data) => {
this.recipeData = data;
});

过滤recipeData的原因是再次获得来自rest api的数据。

所以这里的解决方案就是this.initializeData()从filter(ev : any)方法中删除它。

更新了下面给出的滤波器(ev:any(方法。

filter(ev : any) {
// Filtering code
const val = ev.target.value;
if(val && val.trim() !== ''){
this.recipeData = this.recipeData.filter((item) => {
return(item.Name.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}