Angular开发(四)-关于angular2的通用指令

一、 关于angular中指令包括三类

• 通用指令
• 路由指令
• 表单指令
  

  本次仅仅是讨论通用指令，别的指令将在今后讨论

二、angular的通用指令包括:

• NgClass
• NgStyle
• NgIf
• NgFor

三、关于ngClass、ngStyle在前面章节已经介绍了，如有不清楚的可以返回去查看关于属性绑定章节

四、NgIf的介绍

ngif指令绑定的是一个布尔值，当返回true的时候DOM树节点将新增一个元素及其子节点，如果返回false,那么就移除这个节点，与ngClass中定义的dispaly:none的区别在于直接干掉DOM节点

<div class="box" *ngIf="isShow">第一个</div>
//ts文件
isShow:boolean = true;

五、NgFor的介绍

NgFor可以简单的理解为就是一个for循环，循环出一组数据，其中要注意的NgFor里面有个index表示序列号

<li *ngFor="let item of dataSet;let i = index">
  <span>{{item.name}}</span>----{{i+1}}
</li>
//ts文件
dataSet = [
    {"id":0,"name":"张三"},
    {"id":1,"name":"李四"},
    {"id":2,"name":"王五"},
  ]