4常用指令

1）循环遍历*ngFor
后台数据：

arr:any[]=["Angular",2019,true,"typeScript"]

前台：

<ol>
	  <li *ngFor="let i of arr">
	    {{i}}
	  </li>
</ol>

2）ngClass

<!--将gray设为false，green设为true，那么class就等于green-->
	<div [ngClass]="{'gray':false,'green':true}">just do it1</div>
	<!--也可以通过某个变量来控制-->
	<div [ngClass]="{'gray':flag,'green':!flag}">just do it2</div>

3）遍历数组并且显示元素索引index
后台数据：

arr: any[] = [
  	  {
	      name: 'a',
	      age:'18'
	    },
	    {
	      name: 'b',
	      age:'20'
	    },
	    {
	      name: 'c',
	      age: '22'
	    }
	  ]

前台：

//获取索引值用index
	<ol>
  	<li *ngFor="let i of arr;let key=index">
	    name:{{i.name}},age:{{i.age}}------索引值：{{key}}
	  </li>
	</ol>

4）*ngIf
后台数据：

	  flag: boolean = true

前台：

<h2>2:通过ngIf判断</h2>
	<p *ngIf="flag">flag为true</p>
	<p *ngIf="!flag">flag为false</p>
	//注意没有*ngElse

	//那么现在可以这样用*ngIf
	<li *ngFor="let i of arr;let key=index">
    		<span *ngIf="key==0" class="red">name:{{i.name}},age:{{i.age}}------索引值：{{key}}</span>
		 <span *ngIf="key!==0" class="blue">name:{{i.name}},age:{{i.age}}------索引值：{{key}}</span>
	  </li>

5）ngSwitch,*ngSwitchCase(注意写法)
后台数据：

select: number = 0;//0:training 1：coding 2：testing 3：overtime 4：leave

前台：

h2>3:通过*ngSwitch判断</h2>
<!--0:training 1：coding 2：testing 3：overtime 4：leave-->
<div [ngSwitch]="select">
  <p *ngSwitchCase="0">training</p>
  <p *ngSwitchCase="1">coding</p>
  <p *ngSwitchCase="2">testing</p>
  <p *ngSwitchCase="3">overtime</p>
  <p *ngSwitchCase="4">leave</p>
</div>
<hr/>

	<h2>通过ngClass改变数组元素的样式</h2>
<ol>
  <li *ngFor="let i of arr;let key=index" [ngClass]="{'red':key==0,'blue':key==1,'gray':key==2}">
    name:{{i.name}},age:{{i.age}}------索引值：{{key}}
    name:{{i.name}},age:{{i.age}}------索引值：{{key}}
  </li>
</ol>
<hr />

6）ngStyle
后台数据：

col:string="orange"

前台：

<h2>6ngStyle</h2>
<div [ngStyle]="{'color':'yellow'}">静态属性</div><!--静态数据用引号-->
<div [ngStyle]="{'color':col}">通过变量改变</div><!--动态数据-->
<hr />

7. 管道
   Angular提供了很多管道，大小写，日期格式等，需要用去搜一下就可以了
   后台数据：

	date:any=new Date()

前台：

<h2>7管道</h2>
	<h5>未做任何格式转换的日期</h5>
	<p>{{date}}</p>
	<h5>通过管道转换为指定格式的日期</h5>
	<p>{{date|date:"yyyy:MM:dd hh:mm:ss"}}</p>
	<hr />

这里命名还是不要用date的好，date是内置数据类型，还可以自定义管道，要用的时候再去搜一下怎么用就好