在Ionic 2中无法过滤一个有多个对象的数组。

Question

我可以过滤以下数组

this.items = [
  'Amsterdam',
  'Bogota',
  'India'
];

我在我的 list.ts 文件。

if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

要求 - 我正在从JSON中获取数据，它正在返回具有多个结果的数组，html的图像和控制台如下所示。问题是我如何过滤这些数据。

我正在用下面这段代码从JSON中获取数据:

this._listProduct.listProduct().subscribe(data => {
  this.list = data;
 console.log(data);

我想过滤 this.list:

形象。list.html 形象：和 console.log:

list.html 代码供你参考。

<ion-content padding>
    <ion-grid>


        <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>


       <ion-row>
          <ion-col>Id</ion-col>
          <ion-col>Product/Service</ion-col> 
          <ion-col>Name</ion-col>
          <ion-col>Unit</ion-col>
          <ion-col>Category</ion-col>
          <ion-col>HSN</ion-col>
          <ion-col>Posting head</ion-col>
          <ion-col>Rate</ion-col>
          <ion-col>Type</ion-col>
          <ion-col>SACCode</ion-col>
          <ion-col>Tax Collected</ion-col>
          <ion-col></ion-col>
       </ion-row> 

       <ion-row *ngFor = "let list of list"> 
          <ion-col>{{list.ID}}</ion-col>
          <ion-col>{{list.PRODUCTSERVICE}}</ion-col> 
          <ion-col>{{list.NAME}}</ion-col>
          <ion-col>{{list.UNIT}}</ion-col>
          <ion-col>{{list.CATEGORY}}</ion-col>
          <ion-col>{{list.HSN}}</ion-col>
          <ion-col>{{list.POSTINGHEAD}}</ion-col>
          <ion-col>{{list.RATE}}</ion-col>
          <ion-col>{{list.TYPE}}</ion-col>
          <ion-col>{{list.SACCODE}}</ion-col>
          <ion-col>{{list.TAX_CONNECTED}}</ion-col>
          <ion-col>
             <ion-icon ios="ios-create" md="md-create" (click)="editProduct(list)"></ion-icon>
             <ion-icon ios="ios-close-circle" md="md-close-circle" (click)="deleteProduct(list)"></ion-icon></ion-col> 
       </ion-row>   
    </ion-grid>  
</ion-content>

更新1

我试着使用下面的代码，但它给我的错误。

list.toLowerCase不是一个函数。

代码尝试。

if (val && val.trim() != '') {
  this.list = this.list.filter((list) => {
    return (list.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

Answer 1

在过滤器中添加更多的条件来过滤对象。PFB搜索词将与名称、产品服务和类别进行比较的代码。

this.items = this.items.filter((item) => {
    return ((item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) || 
(item.productservice .toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) || 
(item.category .toLowerCase().indexOf(searchTerm.toLowerCase()) > -1));
  })

Answer 2

初步复制响应....

this.copylist = this.list;

search(val) {
this.list = this.copylist;
if (val && val.trim() != '') {
  this.list = this.list.filter((item) => {
    return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}