搜索栏功能错误 IONIC 3答案

【问题标题】：Search Bar Function Error IONIC 3搜索栏功能错误 IONIC 3
【发布时间】：2018-01-25 15:32:27
【问题描述】：

我正在 Ionic 3 中开发搜索栏功能，以根据插入的特定文本过滤数据。我在控制台上对过滤器功能进行了一些测试。它可以将基于文本的数据检索到数组中。

但是，过滤后的数组没有返回显示。当我删除文本并卡在那里时，又出现了一些错误。

这是在浏览器控制台上的测试：（完整数据）

（过滤数据）

（错误信息）

这里是源代码：（搜索功能）

public food:any;
  queryText: string;

  updateText(){ //this is filter text function
  let queryTextLower = this.queryText.toString().toLowerCase(); //convert to lower case
  let filterFood = []; //to store array of filtered food 
  let food = _.filter(this.food,t => (<any>t).name.toLowerCase().includes(queryTextLower));
     if (food.length) {
       filterFood.push( {food} );
     }

    console.log(filterFood); // testing display on console 
    this.food = filterFood;

    }

HTML 代码：

<ion-toolbar>
    <ion-searchbar aria-placeholder="search" 
                  [(ngModel)]="queryText"
                  (ionInput)="updateText()">
    </ion-searchbar>
  </ion-toolbar>
  <ion-item >

    <ion-label>Name</ion-label>
    <ion-label>Description</ion-label>
    <ion-label>Price</ion-label>
</ion-item>

 <ion-item *ngFor="let item of food" >

   <ion-label style="width: 40px; height: 80px;" >{{item.name}} </ion-label>
    <ion-label style="width: 40px; height: 80px;" >{{item.description}} </ion-label>
    <ion-label style="width: 40px; height: 80px;" >{{item.price}} </ion-label> 
  </ion-item>

感谢您的建议。

【问题讨论】：

标签： javascript search ionic-framework filter lodash

【解决方案1】：

你需要稍微修改一下你的过滤功能：

updateText()(){
  if (this.queryText == ""){
    this.filtered = this.food; // Original array with food elements can be [] also
  }
  else{
    this.filtered = this.food.filter((fd) => {
      return fd.toLowerCase().indexOf(this.queryText.toLowerCase()) > -1;
    })
  }

在您的 HTML 文件中：

<ion-toolbar>
  <ion-searchbar aria-placeholder="search" 
              [(ngModel)]="queryText"
              (ionInput)="updateText()">
  </ion-searchbar>
</ion-toolbar>

<ion-item >
  <ion-label>Name</ion-label>
  <ion-label>Description</ion-label>
  <ion-label>Price</ion-label>
</ion-item>

<ion-item *ngFor="let item of filtered" >
  <ion-label style="width: 40px; height: 80px;" >{{item.name}} </ion-label>
  <ion-label style="width: 40px; height: 80px;" >{{item.description}} </ion-label>
  <ion-label style="width: 40px; height: 80px;" >{{item.price}} </ion-label> 
</ion-item>

【讨论】：