【angular】指令与数据绑定学习

一、指令

1、*NgFor ——实现重复执行某些步骤来展示数据，例如用来展示多列的模板列表，这些模板元素结构及布局一致，只是展示的具体数据不一样。
*NgFor=“let 变量名 of 数组名”——循环一个数组，将每个数组中的内容放置在一个变量名中，通过调用这个变量名的某个属性，在一个页面上反复的生成一段html

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
		<div class="thumbnail">
			<img src="http://placehold.it/320x150">
			<div class="caption">
				<h4 class="pull-right">{{product.price}}元</h4>
				<h4><a>{{product.title}}</a></h4>
				<p>{{product.desc}}</p>
			</div>
		</div>

2、NgClass
通过NgClass指令，可以同时添加或移除多个类。NgClass绑定一个由形如CSS类名：value的对象，其中value是一个布尔类型的数据值，当value为true时则添加对应的类名到模板元素中。

3、NgStyle
采用NgStyle指令可以为模板元素设置多个内联样式，与NgClass类似，NgStyle绑定一个形如CSS属性名：value的对象，其中value为具体的CSS样式。

4、NgIf
绑定一个布尔类型的表达式，当表达式返回true时，可以在DOM树节点上添加一个元素及其子元素，反之将被移除。
<h3 *ngif=“collect.length ===0” class=“no-collection”>未收藏
5、NgSwitch

二、 数据绑定

单向流动：
1、插值绑定：用双大括号表示，{{}}，插值是一种单向的数据流动——从数据模型到模板视图
2、属性绑定：将前端页面属性与控制器中的属性做绑定,用中括号表示。<input [value]="myData"/> ，myData为后台控制器中的某一个属性。
3、事件绑定：click，用小括号表示
<input type="button" value="商品详情" (click)="toProductDetails()">  这个input的button按钮的click事件由toProductDetails方法来处理。

双向绑定：
使用语法[()]来实现双向数据绑定：<input [(ngModel)]=“currentUser.phoneNumber”/>
[]实现了数据流从组建磊到模板，（）实现了数据流从模板到组件类，两者结合的[()]就可以和简单的实现双向绑定。但这种语法只能设置一个数据绑定属性，若想完成更多不同的任务，就得采用它的展开形式来实现，例如，想实现一个给联系人手机号码加上区号的功能：

<input  [ngModel]="currentUser.phoneNumber"  (ngModelChange)="addCodeForPhoneNumber($event)">