(一)数据绑定
1.使用插值表达式将一个表达式的值显示在模板上
<p>{{productDesc}}</p>
2.使用方括号将HTML标签的一个属性绑定到一个表达式上
<img [src] ="imgURL" >
3.使用小括号将组件控制器的一个方法绑定为模板上一个事件处理器。
<button (click)="toProductDetail()" >商品详情</button>
(三)HTML属性绑定
(四)利用管道完成一个类似的搜索功能
页面展示
代码实现:
product.component.html
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" placeholder="请输入商品名称" [formControl]="productNameFilter">
</div>
</div>
</div>
<!-- filter 传入两个参数:productName :指根据哪个字段来过滤,keyword:用户输入的关键字,这里是由formControl传送的值,赋值给keyword的-->
<div *ngFor="let product of products | filter:'productName':keyword " class="col-md-4 col-sm-4 col-lg-4">
...
</div>
product.component.ts
export class ProductComponent implements OnInit {
products:Product[];
//keyword:用来接收用户输入的关键字
private keyword:string;
//FormControl:使用这个之前要在app.moodule.ts里面imports里添加ReactiveFormsModule, FormsModule。
private productNameFilter:FormControl= new FormControl();
constructor(private productService:ProductService) {
this.productNameFilter.valueChanges //valueChanges事件的流
.debounceTime(500) //属于rxjs/Rx 需要导入 //输入块在用户持续输入的时候不发送
.subscribe(value=> this.keyword=value ); //定略
}
使用:ng g pipe pipe/filter 创建一个管道
filter.pipe.ts (注:管道要在product.component.html调用)
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
//producList:商品列表
//productFilterField:商品哪个字段去过滤
//keyword:用户输入的关键字
transform(producList: any[], productFilterField: string,keyword:string): any {
if(!productFilterField || !keyword){
return producList;
}
//item:集合中的元素,这里返回Boolean值,true保留,false:不保留
return producList.filter(item=>{
//这里item[productFilterField]元素指定的值是什么
let productFieldValue = item[productFilterField];
return productFieldValue.indexOf(keyword) >=0 ;
});