改造在线竞拍三

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>