1.product.component.html

<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
      <input class="form-control" placeholder="請輸入商品名稱"
      [formControl]="titleFilter">
    </div>
  </div>
</div>

2.app.module.ts 響應式程式設計需要引入的模組

import
 
 {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FilterPipe } from './pipe/filter.pipe';
  ...
  imports: [
    BrowserModule,
    FormsModule,
    /*主模組注入路由配置*/
    RouterModule.forRoot(routeConfig),
    /*響應式程式設計需要引入的模組*/
    ReactiveFormsModule
  ],
  /*服務宣告在模組中*/
  providers: [ProductService]
 
,
  bootstrap: [AppComponent]
})
export class AppModule { }

3.product.component.ts

import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from '../shared/product.service';
import {FormControl} from '@angular/forms';


@Component({
  selector: 'app-product',
  templateUrl:
 
 './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  /*搜尋商品*/
  /*關鍵字*/
  private keyword: string;
  private titleFilter: FormControl = new FormControl();
  private products: Product[];
  private imgUrl = 'http://placehold.it/320x150';
  /*注入服務*/
  constructor(private productService: ProductService) {
    this.titleFilter.valueChanges
      .subscribe(
        value => this.keyword = value
      );
  }
  /*呼叫方法獲得商品*/
  ngOnInit() {
    this.products = this.productService.getProducts();
  }
}

4.生成管道
–>ng g pipe pipe/filter
filter.pipe.ts

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

5.product.component.html

<div *ngFor="let product of products | filter:'title':keyword" class="col-md-4 col-sm-4 col-lg-4">
  ...
</div>