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>