Angular学习之五（属性绑定）

事件绑定

Dom属性绑定

// 插值表达式
{{prop-name}}
// dom属性绑定
[class] = "prop-name"

Html属性绑定

双向绑定

在app.module.ts中引入import { FormsModule } from '@angular/forms';并在providers中配置模块

//不同的dom元素有不同的实现
[(ngModel)]="controllerProp"

管道（处理输入的数据，对数据进行过滤）

//格式化日期
controllerProp | date:'yyyy-MM-dd HH:mm:ss'
//大小写转换
uppercase,lowercase
//格式化数字
number:'2.1(最小保存位数)-4(最多保存位数)'
//处理流
async

自定义管道

//需要加到模块的Decleration中
ng g pipe pipe-name

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'hasValueFilter'    //管道名称
})
export class FilterPipe implements PipeTransform {

  transform(list: any[], keyWord: string): any {
    if (!keyword) {
      return list;
    }

    return list.filter(item => {
      return item.indexOf(keyword) >= 0;
    });
  }
}