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 is not a function

代码尝试 -

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);
  })
}

}

无法过滤具有多个对象的阵列 - IONIC 2

2 个答案: