angular 管道，数据操作，看这个就够了

绑定类型

Angular 提供了多种数据绑定方式。绑定类型可以分为三类，按数据流的方向分为：

• 从数据源到视图——插值

方式一： {{expression}}
方式二： [target]="expression"
方式三： bind-target="expression"

• 从视图到数据源——事件

方式一： (target)="statement"
方式二： on-target="statement"

• 双向：视图到数据源到视图——双向

方式一： [(target)]="expression"
方式二： bindon-target="expression"

 

数据操作

<!-- 数据绑定 -->
<div [title]='title'>
  {{content}}
</div>


<!-- 解析绑定 html 标签 -->
content: string = '<h1>我是 html</h1>'
<div [innerHtml]='content'></div>


<!-- 循环遍历数组 -->
<div *ngFor="let item of arr">
  {{item}}
</div>

<div *ngFor="let item of objArr">
  {{item.name}}--{{item.age}}
</div>


<!-- 循环数据显示索引值 -->
<div *ngFor="let item of arr;let key=index">
  {{key}}--{{item}}
</div>


<!-- 条件判断 -->
<img src="assets/imgs/3.jpg" *ngIf="flag" alt="">
<img src="assets/imgs/5.jpg" *ngIf="!flag" alt="">

<span [ngSwitch]="order">
  <p *ngSwitchCase="1">我好</p>
  <p *ngSwitchCase="2">你好</p>
  <p *ngSwitchDefault>大家好</p>
</span>


<!-- 循环判断 -->
<div *ngFor="let item of arr;let key=index">
  <span *ngIf="key===1" class="red">{{item}}</span>
  <span *ngIf="key!==1">{{item}}</span>
</div>

<div *ngFor="let item of arr;let key=index">
  <span [ngClass]="{'red': key===2}">{{item}}</span>
</div>


<!-- 绑定属性 -->
<div [ngClass]="{'red': flag}">hello world</div>
<div [ngStyle]="{'background': str}">hello world</div>


<!-- 引入图片直接 assets/... -->
<img src="assets/imgs/3.jpg" alt="">
<img [src]="url" alt="">


<!-- 管道 -->
<div>
  {{time | date:'yyyy-mm-dd hh:mm:ss'}}
</div>


<!-- 执行事件 -->
<button (click)="run()">执行</button>

<button (click)="change('改变后')">{{title}}</button>
title: string = '改变前'
change(str: string):void {
  this.title = str
}

<input type='text' (input)="input($event)" />

双向数据绑定

• app.modules.ts 中引入数据双向绑定模块

// 数据双向绑定模块
  import { FormsModule } from '@angular/forms'

  imports: [ // 配置当前模块依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

• 使用数据双向绑定

<input type="text" [(ngModel)]="keywords">
{{keywords}}

// ts 中设置默认值
keywords: string = '这是默认值'

原生管道

名称	描述
json	将输入数据对象经过 JSON.stringify() 方法转换后输出对象的字符串 {{jsonObject | json}}
uppercase	大写转换
lowercase	小写转换
currency	格式化数字为货币格式 {{b | currency:'USD':true:'4.2-2'}} ，这里的′USD′是美元 UnitedStatesdollar 的缩写，当为 false 时不显示符，当为 true 时，则显示 $ 符。后面的规定小数位数的参数和 number 的一样
number	用来将数字处理为我们需要的小数格式 {{pi | number:'{最少整数位数}.{最少小数位数}-{最多小数位数}'}}
date	日期格式化 {{time | date:'yyyy-mm-dd hh:mm:ss'}}
limitTo	限制数组长度或字符串长度 {{childrenArray | limitTo : 2}}

filter：

childrenArray:object[] = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
]
func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有 a 的
{{ childrenArray | filter : 4 }} //匹配属性值中含有 4 的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配 name 属性中含有 i 的
{{childrenArray | filter : func }} //参数是函数，指定返回 age>4 的

orderBy： 过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则

• 参数可以是一个字符串，表示以该属性名称进行排序
• 可以是 一个函数，定义排序属性
• 还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

{{ arr | orderBy : 'age' }} //按 age 属性值进行排序，若是 -age，则倒序
{{ arr | orderBy : orderFunc }} //按照函数的返回值进行排序
{{ arr | orderBy : ['age','name'] }} //如果 age 相同，按照 name 进行排序

自定义管道

准备工作

新建一个 名字叫做 formatePipe 的管道
使用命令行工具：ng g pipe pipe/formatePipe
注意
管道的声明是需要加入到 app.moduel.ts 的 元数据中 declarations FormatePipePipe 类

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

@Pipe({
  name: 'formatePipe'
})
export class FormatePipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

源码解释：

@Pipe({
name: ‘formatePipe’
})
@Pipe语法糖是告诉 angular 当前的类是一个 管道
name 的值是：我们使用管道的时候的模版表达式的标识符。这个名字是可以任意定义的。

transform(value: any, args?: any): any {
    return null;
}

transform 方法
value： 是传入的值
args： 是传入的格式化的值

例如：

<div>我的生日是{{birthday | date : "yyyy-MM-dd"}}</div>
date 是 name 的值
birthday 是 value
“yyyy-MM-dd” 是 args

修改管道的方法

transform(value: String, args: String): any {
  if( !args ){
      return value;
  }
  
  return  args +""+ value;
}

使用管道

html 代码：
<p>自定义的管道 {{price | formatePipe: '￥'}}</p>
ts 代码：
price: number = 3.13456537;
界面显示：
自定义的管道 ￥3.13456537