当前位置 博文首页 > 立志欲坚不欲锐,成功在久不在速度:angular ng指令
<div *ngIf="a>b"</div> <!--当a>b的时候显示-->
<div *ngIf="str=='yes'"></div> <当str等于yes的时候显示-->
<div *ngIf="myFunc()"></div><!--当函数返回true的时候-->
<div class='container' [ngSwitch]="myVar">
<div *ngSwitchCase="'A'">Var is A</div>
<div *ngSwitchCase="'B'">Var is B</div>
<div *ngSwitchCase="'C'">Var is C</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
<div [ngStyle]="{color:'white','background-color:'blue'}>
Uses fixed white text on blue background
</div>
对象的?key?是?CSS?Class?的名称? ? value?的值是truthy/falsy的值,表示是否应用该样式
CSS?样式
.bordered{
border:1px dashed black;
background-color:#eee;
}
HTML
<div [ngClass]="{bordered:false}">This is never bordered</div>
<div [ngClass]="{bordered:true}"> This is always bordered</div>
//定义数组
public list:any[]=['我是第一个新闻',22222,'我是第三个新闻'];
//遍历list数组中的每一个项,并且显示出来
<ol>
<li *ngFor="left item of list>
{{item}}
</li>
</ol>
数组中还可以包含对象:
public userlist:any[]=[{
username:'张三',
age:20
},{
username:'李四',
age:21
}];
//渲染数组中的内容:
<ul>
<li *ngFor="let item of userlist let key=index;">
<span *ngIf="key==1" class="red"> {{key}}---{{item.username}}<span>
<span *ngIf="key!=1">{{key}}----{{item.username}}<span>
</li>
</ul>
?
cs