Question

我正在一个在线图书馆做一个项目，我有一个模态页面，允许你通过3个输入，标题，作者和年份搜索书籍。如何通过这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
      },

Answer 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。也许您需要根据自己的需要稍微改变一下条件。

多个值离子后过滤

1 个答案: