Javascript 搜索栏功能错误3

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

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

以下是对浏览器控制台的测试： （完整数据）

（过滤数据）

（错误消息）

以下是源代码： （搜索功能）

公共食品：任何；
queryText：字符串；
updateText（）{//这是一个筛选文本函数
让queryTextLower=this.queryText.toString（）.toLowerCase（）；//转换为小写
让filterFood=[]；//存储过滤食品数组
let food=uzy.filter（this.food，t=>（t）.name.toLowerCase（）.includes（queryTextLower））；
if（食物长度）{
过滤食物。推（{food}）；
}
console.log（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> 

名称
描述
价格
{{item.name}
{{item.description}
{{item.price}}

---

谢谢您的建议。

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

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> 

名称
描述
价格
{{item.name}
{{item.description}
{{item.price}}

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

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> 

名称
描述
价格
{{item.name}
{{item.description}
{{item.price}}