Angular 7自定义Filter Pipe代码解析及相关问题咨询

Background Context #

You're working on a SIM project with Angular 7, using a custom filter pipe to narrow down a Product array based on a keyword input. Here's your relevant code for reference:

Filter Pipe Code

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
 transform(list:any[], filterField:string, keyword:string){
  if(!filterField || !keyword){return list;}else{
   return list.filter(item =>{
    let fieldValue = item[filterField];
    return fieldValue.indexOf(keyword)>=0;
   } )
  }
 }
}

Product Class & Sample Data

export class Product {
 constructor(
  public id: number,
  public title: string,
  public price: number,
  public rating: number,
  public desc: string,
  public categories: Array<string>
 ) { }
}

private products: Product[] = [
 new Product(1, '1st Product', 1.99, 3.5, 'This is the 1st product, which is used for display', ['Electronics', 'Hardware']),
 new Product(2, '2nd Product', 2.99, 2.5, 'This is the 2nd product, which is used for display', ['Books']),
 new Product(3, '3rd Product', 3.99, 4.5, 'This is the 3rd product, which is used for display', ['Hardware']),
 new Product(4, '4th Product', 4.99, 1.5, 'This is the 4th product, which is used for display', ['Electronics', 'Hardware']),
 new Product(5, '5th Product', 5.99, 3.5, 'This is the 5th product, which is used for display', ['Electronics']),
 new Product(6, '6th Product', 6.99, 2.5, 'This is the 6th product, which is used for display', ['Books'])
]

Component Template (product.component.html)

<div class="row">
 <div class="col-sm-12">
  <div class="form-group">
   <input class="form-control" placeholder="Please Input" [formControl]="titleFilter">
  </div>
 </div>
</div>
<div *ngFor="let product of products | filter:'title':keywordInput" class="col-md-4 col-sm-4 col-lg-4">
 <div class="thumbnail">
  <img src="https://via.placeholder.com/320x150">
  <div class="caption">
   <h4 class="pull-right">{{product.price}} Euro</h4>
   <h4><a [routerLink]="['/product',product.id]">{{product.title}}</a></h4>
   <p>{{product.desc}}</p>
  </div>
  <div>
   <app-stars [rating]="product.rating"></app-stars>
  </div>
 </div>
</div>

Component Logic (product.component.ts)

export class ProductComponent implements OnInit {
 products:Array<Product>;
 keywordInput:string;
 titleFilter:FormControl=new FormControl;
 constructor(private productService:ProductService) {
  this.titleFilter.valueChanges.pipe(debounceTime(500))
  .subscribe( value => this.keywordInput = value, );
 }
 ngOnInit() {
  this.products=this.productService.getProducts();
 }
}

Your Questions Answered #

1. Understanding the Filter Callback & Array.filter() Status

Let’s break down the snippet you’re confused about:

itemTitle => { let fieldValue = itemTitle[filterField]; return fieldValue.indexOf(keyword) >= 0; }

• What does itemTitle[filterField] mean?
  First, itemTitle (a parameter name—your actual pipe uses item, but the name doesn’t matter) represents each individual Product object in your array. The square brackets [] are JavaScript’s bracket notation for accessing object properties. Unlike dot notation (e.g., item.title), bracket notation lets you use a variable to dynamically pick which property to target. Since you pass 'title' as the filterField in your template, itemTitle[filterField] is exactly the same as itemTitle.title—it grabs the title value from the current product. This is what makes your pipe reusable: you could filter by 'desc' or 'categories' later without rewriting core logic!

• Is Array.filter() deprecated in Angular 7?
  Not at all! Array.filter() is a core JavaScript feature (introduced in ES5) and is fully supported in Angular 7 (and all modern Angular versions). It’s the most concise and idiomatic way to filter arrays. If you needed an alternative for edge cases, you could manually loop through the array and push matches to a new array, but filter() is the best default choice.

2. Why Your Alternative Return Statement Fails

Your proposed replacement code doesn’t work because Array.filter() requires a boolean return value (true to keep the item, false to discard it):

if (fieldValue.indexOf(keyword) >= 0) { 
  return fieldValue.indexOf(keyword); 
} else {
  return null;
}

Here’s the problem:

• When the keyword matches the start of the field value (e.g., searching for "1st" in "1st Product"), indexOf() returns 0. In JavaScript, 0 is a falsy value—so filter() treats this as false and discards the matching item, even though it should be kept.
• Returning null for non-matches works (since null is falsy), but the matching items that return 0 get incorrectly filtered out.

The original code return fieldValue.indexOf(keyword) >= 0 works because it explicitly converts the index to a boolean: any index ≥ 0 (a match) becomes true, while -1 (no match) becomes false. If you want to rewrite it with an if statement, return booleans directly:

if (fieldValue.indexOf(keyword) >= 0) {
  return true; // Keep the matching item
} else {
  return false; // Discard non-matching items
}

For even cleaner code, use ES6’s includes() (supported in Angular 7) to check for matches directly:

return fieldValue.includes(keyword);

内容的提问来源于stack exchange，提问作者puddlejumper26