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

Angular4学习笔记(五)

猜你喜欢