在工作中寫ionic項目時，因為用的ionic3，與之相搭配的是Angular4，之前不會，就大致看看，寫項目的時候遇到再查找。

在寫到etf指數基金的時候，有的可以立即搶購，有的是封閉期。想實現這種效果，如下圖：

我就用到了ng-class,兩個按鈕需要不同的樣式，

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)"[ngClass]="{true:'hactive',false:'hdisable'}[data.isActive]" round>{{data.etfbtn}}</button></ion-col>

我想在父頁面傳值的時候，傳過來一個isActive參數，值為true或者false， 但是后臺給的接口才不會給你這個數據，所以得直接預判,用*ngIf：

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)" class="hactive" *ngIf="data.etfbtn=='立即搶購'" round>{{data.etfbtn}}</button><button ion-button (click)="onEvent('onPurchase', data)" class="hdisable" *ngIf="data.etfbtn=='封閉期'" round>{{data.etfbtn}}</button> </ion-col>
以上兩段代碼都是相同的效果，但是ng-class通過對象數組只有true和false兩種狀態，有些局限，*ngIf可以寫好多種， 但是相同代碼要重復寫，不好看，代碼冗余；我在網上也查到了其他做法，可以試試； 第三種：通過key/value <div ng-controller="firstController"><div ng-class="{'change1':select,'change2':choice,'change3':lala}">{{data.item}}</div> </div><script>var app=angular.module("myModule",[]);app.controller('firstController',function($scope){$scope.select=true;$scope.lala=true;})</script>哈哈，每天進步一點點,^_^
鏈接是http://www.jb51.net/article/92775.htm

總結

以上是生活随笔為你收集整理的AngularJS中关于ng-class和*ngIf指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。