angular2 [ngStyle] [ngClass]的用法

前端之家收集整理的这篇文章主要介绍了angular2 [ngStyle] [ngClass]的用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、ngStyle

基本用法

<div [ngStyle]="{'background-color':'green'}"></<div>

判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

2、ngClass
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类

基本用法

[ngClass]="{'text-success':true}"

判断

[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"

3、例子
循环显示的第一行添加text-danger样式,文字变红色

const arr = [1,3,4,5,6]
<ul>
    <li *ngFor="let item of arr,let i = index">
        <span [ngClass]="{'text-danger': i==0}">{{item}}</span>
    </li>
</ul>

猜你在找的Angularjs相关文章