ionic2/3 ngClass 和ngStyle用法

来源:互联网 发布:js改变a标签的href 编辑:程序博客网 时间:2024/06/06 09:34

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

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

ngStyle没有判断

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

ngStyle有判断

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

例如:

<ion-col col-4 *ngFor="let item of rmpp ;let i = index" (click)="choose(item.id)"> <button id="{{item.id}}" ion-button small outline [ngClass]="{'active':i === 0}">{{item.name}}</button></ion-col>
<ion-col col-4 *ngFor="let item of rmpp ;let i = index" (click)="choose(item.id)"> <button id="{{item.id}}" ion-button small outline [ngStyle]="{'color':i=== 0 ? 'green' : 'red' }">{{item.name}}</button></ion-col>
原创粉丝点击