通过离子搜索栏过滤手风琴下拉列表

Question

嗨，我刚刚通过以下教程博客链接创建了离子手风琴下拉列表，该链接使用小部件创建手风琴下拉列表， 下面是该博客的链接.

http://masteringionic.com/blog/2019-01-27-creating-a-simple-accordion-widget-in-ionic-4/

更新：这是"我的项目演示"链接 https://stackblitz.com/github/dSaif/search-accordion 一切都很完美，但我想在手风琴的顶部添加离子搜索栏，以便通过输入文本来过滤下拉列表。

请协助我该怎么做。谢谢。

Answer 1

您必须在主页中创建一个变量来存储过滤结果。然后，您需要有一个过滤功能，该功能将从搜索栏中获取输入并过滤您的主列表。请记住，您不应将新变量设置为 master 列表，这可能会由于对象引用而导致问题。

所以你应该有类似的东西

在你的 HTML 中

<ion-searchbar placeholder="Search a name." [(ngModel)]="searchValue" (ionChange)="filterList()"></ion-searchbar>

在您的 ts 文件中

searchValue: string = '';
filteredList: Array<{ name: string, description: string, image: string }> = this.technologies;
// function called in the html whenever you change the ion searchbar value
private filterList(){
//Make a variable so as to avoid any flashing on the screen if you set it to an empty array
const localFilteredList = []
this.technologies.forEach(currentItem => {
//here goes your search criteria, in the if statement
if(currentItem.name && currentItem.name.toLowerCase().includes(this.searchValue.toLowerCase())) {
localFilteredList.push(currentItem);
}
});
//finally set the global filter list to your newly filtered list
this.filteredList  = localFilteredList;
}

您还需要确保引用 filterList 变量而不是您正在引用的当前变量。