Question

我刚接触Angular4.Iam工作过滤器。我需要显示在输入搜索框中输入的搜索项目。为此我使用管道进行过滤。但它不起作用。我的代码是：

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchFilter',
    pure: false
})
export class SearchFilterPipe implements PipeTransform {

 transform(items: any[], term): any {
        console.log('term', term);
      
        return term 
            ? items.filter(item => item.title.indexOf(term) !== -1)
            : items;
    }
}

＆＃13;

<div class="container">
        <h3 class="animated wow zoomIn" data-wow-delay=".5s">New Collections</h3>
        <p class="est animated wow zoomIn" data-wow-delay=".5s">Shop here what you want within minutes of time.</p>
        <input type="text" class="form-control" name="term" [(ngModel)]="term">
        <div style="float:right">
            <pagination-controls (pageChange)="p=$event"></pagination-controls>
        </div>
        <div class="new-collections-grids" style="background-color:white;">
            <div class="col-md-3 new-collections-grid" *ngFor="let data of productsList| searchFilter : term |paginate: {itemsPerPage:8,currentPage: p}" style="background-color:white;">
                <div class="col-md-12 new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s" style="width:285px;height:350px;">
                    <div class="new-collections-grid1-image" align="center">

                        <a routerLink="/productdetails" class="product-image"><img src="{{data.images[0].src}}" alt=" " style="text-align:center" height="130" width="auto" /></a>
                        <div class="new-collections-grid1-image-pos">
                            <a routerLink="/productdetails">Quick View</a>
                        </div>

                    </div>
                    <br>
                    <table align="center">
                        <tr style="height:30px"><span routerLink="/productdetails">{{data.name}}</span></tr>
                        <tr>
                            <td> PRICE<span class="item_price"> {{data.regular_price}}</span></td>
                        </tr><br>
                        <tr>
                            <p><a class="item_add" routerLink="/productdetails" style="border:1px solid red;color:red;padding:6px;">Add to cart </a></p>
                        </tr>
                    </table>
                </div>

            </div>
            <div class="clearfix"> </div>
        </div>
        <br>
        <div style="float:right">
            <pagination-controls (pageChange)="p=$event"></pagination-controls>
        </div>
    </div>

＆＃13;

我已正确导入所有文件。我在哪里犯了错误？请帮帮我

Answer 1

您应该尝试以下

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'searchFilter',
 pure: false
}) 
export class SearchFilterPipe implements PipeTransform {

transform(items: any, term:string): any {
 if(items.length === 0 || term === ''){
    return items;
 }
 const resultArray = [];
 for(const item of items) {
   if(item.title == term){
      resultArray.push(item);
   }
  }
  return resultArray;
}//end of pipe

byDefault pure是真的。这意味着直到除非过滤器输入不会被更改，否则不会触发管道。但是如果你输入'pure：false'，那么每当组件的数据发生变化时，这将触发相应的过滤器，但这可能会影响性能，因为很多时候过滤器会触发。我想这可能会对你有帮助。

Answer 2

这主要发生在分页管道结果干扰搜索管道时。我通过存储搜索管道中的初始数组解决了这个问题。这是我的代码段。

解决方案1 

  storedArray:Array<any> = [];
  transform(value: any, opt?: opt): any {
  //If stored Array length is 0 then it means this is the first time
   if(this.storedArray.length == 0){
   this.storedArray = value;
   }
   /*You search filter code comes here which filters stored array not the value that 
   comes through pipe*/ 
   return this.storedArray.filter((item) => {
   //Your logic
    });
   }

注意：如果您加载了更多功能，以后又添加了更多数据，则必须向if子句添加另一个条件，即：

 //This will update whenever data is more than the stored data
 if(this.storedArray.length < values.length){
   this.storedArray = value;
   }

解决方案2

我开发了一个名为ngconf-pagination的库，该库可以使用单个管道同时进行搜索和分页。这将解决分页结果对搜索结果的影响。

管道在Angular4中不适用于搜索过滤器

2 个答案: