如何在 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;
        });
      }