Angular，Filter管道返回空数据/ false

Question

i'm trying to follow a custom filter pipe tutorial from this link , but when i run my project on the browser the table become empty. I'm not sure what i have to do to correct this. I already use import import { FilterPipe } from './filter.pipe'; to app.component.ts and declaration in module.ts .

 //filter.pipe.ts transform(productList: any, term: any): any { if (term === undefined) return productList; //not sure, but i think it causes by this line return productList.filter(function(Product) { return Product.prdName.toLowerCase().includes(term.toLowerCase()); }) } 

 <form id="filter"> <input type="text" class="form-control" name="term" [(ngModel)]="term" placeholder="filter by name" /> </form> 

 <tr *ngFor="let product of productList | filter: term"> <td>{{product.prdName}}</td> <!--other table data--> <td> 

When i remove the | filter: term" | filter: term" part the table data showed but when i put it back table data show nothing. Can somebody help me figure this out? Sorry for my bad English.

Answer 1

in your component how is initializated the term variable?

becouse it maybe is not undefined but it is null or empty (''), in the initial condition try comparing with null, undefined and ''.

Answer 2

I guess you need to add a check if the term is null. You could implement your pipe as follows,

export class MyFilterPipe implements PipeTransform {

    transform(items: any[], term: any[]): any {
      if (!term) 
        return items;
      return items.filter(item => item.productName.indexOf(term) > -1);
    }
}

DEMO