Angular4学习笔记(五)

（一）数据绑定

   1.使用插值表达式将一个表达式的值显示在模板上

 
{{productDesc}}

   2.使用方括号将HTML标签的一个属性绑定到一个表达式上

   3.使用小括号将组件控制器的一个方法绑定为模板上一个事件处理器。

商品详情

（二）DOM属性绑定

（三）HTML属性绑定

(四)利用管道完成一个类似的搜索功能

      页面展示

代码实现：

product.component.html

 

    

      

        
      
    
  
  
  

    ...
  

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 ;  
    });