angular中动态控制样式；ngClass和ngStyle

ngClass

<p [ngClass]="{'red':true,'blue':false}">header works!</p><div [ngClass]="{'orange':flag,'green':!flag}">head</div>
<!-- ts中 -->
<!-- flag:Boolean=true; -->
<!-- 样式 -->
<!-- .orange{color:orange} -->
<!-- .green{color:green} --><ul><li *ngFor="let item of arr;let i=index"><span [ngClass]="{'orange':item.age==13}">{{item|json}}---{{i}}</span></li>
</ul><!-- public arr=[{name:"小丽",age:11},{name:"小步",age:12},{name:"小张",age:13},{name:"小王",age:14},]; -->

ngStyle

<div [ngStyle]="{'background-color':attr}">ngStyle</div>
<!-- public attr='orange'; -->

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！