Angular组件中的模板

模板类似于HTML代码段，但是两者是不同的东西，区别之一就是模板可以使用Angular的数据绑定。

1. 解析html标签

//解析html标签
<span [innerHTML]='content' class="red"></span>

public content="<h2>我是一个html标签</h2>";

.red {
  color: red;
}

//angular模版里允许做简单的运算
1+2={{1+2}}

2. 绑定数据

//属性绑定数据
<img [src]="picUrl" />
public picUrl="https//www.baidu.com/img/...";

<img src="assets/images/01.png" alt="收藏" />

3. 数据循环

//数据循环 *ngFor

//ol有序列表
//ul                                               
<ol>
  <li *ngFor="let item of arr">
    {{item}}
  </li>
</ol>

//public arr=['111', '222', '333 '];
public arr:any[]=['111', '222', '333 '];
//public arr:Array<any>=['111', '222', '333 '];

//打印数据循环索引
<ul>
  <li *ngFor="let item of arr;let key=index;">
    {{key}}---{{item}}
  </li>
</ul>

public arr:any[]=['111', '222', '333 '];

4. 条件判断 *ngIf

5. *ngSwitch

6. ngClass, ngStyle

//ngClass动态改变样式
<div [ngClass]="{'orange':flag,'red':!flag}">
</div>

public flag:boolean=true;

<p [ngStyle]="{'color': attr}"></p>

public attr:string="red";

7. 管道

//大小写转换

//日期格式转换

//小数转换
<span>{{amount | number:\'1.0-12\'}}</span>

8. 双向绑定