如何在 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()">

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

  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;
        });
      }