Фильтр после нескольких значений ionic

Я делаю проект в онлайн-библиотеке, и у меня есть модальная страница, которая позволяет вам искать книги по трем параметрам: название, автор и год. как мне отфильтровать книги по этим 3 входам?

мой modal.html:

    <ion-content padding>
      <ion-list>
      <ion-item>
        <ion-label color = "primary" >Title</ion-label>
        <ion-input placeholder = "Insert the title"  [(ngModel)] = "searchTerm"  name = "titlebook" ></ion-input>
        </ion-item>
        <ion-item>
        <ion-label color = "primary">Author</ion-label>
        <ion-input placeholder = "Insert the Author"  name = "authorbook" ></ion-input>
      </ion-item>
      <ion-item>
          <ion-label color = "primary">Year</ion-label>
        <ion-input type = "number" placeholder = "Insert the Years" name = "anno"></ion-input>
        </ion-item>
       </ion-list>
    <ion-buttons text-center>
    <button  ion-button color = "secondary" (click) = "searchTitle()">save
    </ion-buttons>

мой пример json (100 книг):

    {
        "id":"3",
        "author": "Dante Alighieri",
        "country": "Italy",
        "imageLink": "images/the-divine-comedy.jpg",
        "language": "Italian",
        "link": "https://en.wikipedia.org/wiki/Divine_Comedy\n",
        "pages": 928,
        "title": "The Divine Comedy",
        "year": 1315
      },

Возможный дубликат Фильтровать массив объектов по нескольким свойствам и значениям

— 19.06.2018 09:56

arrays angular typescript search ionic-framework

19.06.2018 09:55

Структурированный массив Numpy

Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...

3 эффективных способа найти максимальное значение в массивах JavaScript

T - 1Bits: Генерация последовательного массива

По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...

Что такое деструктуризация массива в JavaScript?

Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.

1 025

Ответы 1

Вот простой способ сделать это:

Привяжите событие изменения к трем вашим входам следующим образом: <ion-input (ionChange) = "filterItems()"></ion-input>.

Добавьте свою функцию filterItems() в модальный контроллер:

filterItems() {
    this.books.filter((item) => {
        // the condition inside here, decides whether the item will be shown or not
        return item.title.toLowerCase().includes(this.title.toLowerCase) && item.author.toLowerCase().includes(this.author.toLowerCase());
    });
}

Теперь вы подбираете название и автора. Конечно, вам нужно связать свои ion-input с ngModel.

И вы можете выводить свои книги, используя *ngFor в своем шаблоне.

Забота! Функция вернет false, когда входы пусты. Возможно, вам нужно немного изменить состояние под свои нужды.

что я должен связать с ngModel

— 20.06.2018 11:59

19.06.2018 17:53