Angular4学习笔记(五)

（一）数据绑定

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

 <p>{{productDesc}}</p>

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

<img [src] ="imgURL" >

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

<button (click)="toProductDetail()" >商品详情</button>

（二）DOM属性绑定

（三）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 ;      });