<!-- 数据绑定 -->
<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