时间戳

首页 > 解决方案 > 在多个值离子后过滤

arrays - 在多个值离子后过滤

问题描述

我正在一个在线图书馆上做一个项目，我有一个模态页面，允许您通过 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
      },

标签： arraysangulartypescriptsearchionic-framework

解决方案

这是一个简单的方法：

在您的三个输入上绑定一个更改事件，如下所示<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的 's 与 ngModel 绑定。

*ngFor您可以使用模板输出您的书籍。

关心！当输入为空时，该函数将返回 false。也许您需要根据需要稍微更改条件。

推荐阅读