Question

您好，我是通过跟随一个教程博客链接创建了离子手风琴下拉菜单的，该博客链接使用了用于创建手风琴下拉菜单的小部件，下面是该博客的链接。

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

已更新：这是我的项目演示链接https://stackblitz.com/github/dSaif/search-accordion 一切正常，但是我想在手风琴的顶部添加Ion-searchbar，以便通过输入文本来过滤下拉列表。

请帮助我，我该怎么做。谢谢。

Answer 1

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

所以您应该有类似

在您的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变量，而不要引用当前的变量。

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

1 个答案: