如何在Ionic v5中搜索和过滤数组？

Question

当前，我正在尝试过滤和搜索Ionic v5中的数组。但是我不知道如何结合这两个标准。

我有一个页面（房间概述），其中显示了房间阵列的所有对象。我从“数据服务”获得这些对象，该服务读取JSON文件。

部分room-overview.ts文件：

ionViewDidEnter() {
    this.setSearchedItems('');

    this.searchControl.valueChanges
      .pipe(debounceTime(300))
      .subscribe(search => {
        this.searching = false;
        this.setSearchedItems(search);
      });
  }

  onSearchInput() {
    this.searching = true;
  }

  setSearchedItems(searchTerm) {
    this.rooms = this.dataService.searchItems(searchTerm);
  }

在“房间概览”页面上，有一个搜索栏，可用于搜索单个对象。此搜索栏调用onSearchInput（）方法。

<ion-searchbar [formControl]="searchControl (ionChange)="onSearchInput()">

为此，我有一个过滤器/搜索服务，可为我提供所有适合搜索词的对象。 “项目”是所有房间对象的数组。

  searchItems(searchTerm) {
    return this.items.filter(item => {
      return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });
  }

除了搜索外，还应该可以根据某些条件进行过滤（例如，房间是否在特定建筑物中）。通过模式页面解决了这种过滤可能性，该模式页面将在关闭页面时将值传递到房间概览页面。

搜索或过滤都可以单独进行，但是我不知道如何将两者结合在一起。我认为“ searchItem（）”方法不仅应过滤房间对象数组。它应该能够进行过滤，并且仅使用过滤后的数组。

我希望有人可以帮助我：-）

Answer 1

也许是这样？

  searchAndFilterItems(searchTerm) {
        const filteredItems = this.items.filter(item => {
            // Apply filters
        });
        return filteredItems.filter(item => {
          return filteredItems.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
        });
      }