一、指令
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)">