响应编程和管道

import {ReactiveFormsModule, FormsModule, FormControl} from '@angular/forms';
imports: [
    BrowserModule,
    AppRoutingModule,

    // 把路由注入到主模块
    RouterModule.forRoot(routeConfig),
    FormsModule,

    // RouterModule.forChild(routeConfig)
    // 相应式编程模块
    ReactiveFormsModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

filter.pipe.ts

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(list: any[], filterName: string, keyword: string): unknown {
    if (!filterName || !keyword){
      return list;
    }
    return list.filter(item =>
      item[filterName].indexOf(keyword) >= 0
    );
  }

}

product.ts

import {FormControl } from '@angular/forms';
import {debounceTime} from 'rxjs/operators';
export class ProductComponent implements OnInit {

  public products: Product[];
  public keywords: string;
  public titleFilter: FormControl = new FormControl();
  constructor(private productService: ProductService) {
    this.titleFilter.valueChanges.pipe(debounceTime(500)).subscribe(
      value => this.keywords = value
    );
  }

4.product.html

 <div class="form-group">
      <label>
        <input class="form-control" placeholder="请输入商品名称" [formControl]="titleFilter">
      </label>
    </div>
<div  *ngFor="let product of products | filter: 'title': keywords" class="col-md-4 col-lg-6 col-sm-9">