角度2客户端条件

Question

I am trying to call api on block/unblock Icon button to block and unblock user. Now I want to ask how could I change Icon Image if user active to show unlock image in front of active and vice versa.

Image

Html

 <link href="../../font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <h1>User View </h1> <div class="row"> <div class="panel panel-default"> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th class="text-center">First Name</th> <th class="text-center">Last Name</th> <th class="text-center">Email</th> <th class="text-center">Status</th> <th class="text-center">Block/Unblock</th> </tr> </thead> <tbody> <tr *ngFor="let user of _data | paginate: { itemsPerPage: 10, currentPage: p }"> <th>{{user.FirstName}}</th> <th>{{user.LastName}}</th> <th>{{user.Email}}</th> <th>{{ user.IsActive == true ? 'Active' : 'Block' }}</th> <th> <div class="text-center"> <button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user.SubscriptionId)"> <i class="fa fa-unlock" aria-hidden="true"></i> </button> </div> </th> </tr> </tbody> </table> <pagination-controls (pageChange)="p = $event" #api></pagination-controls> </div> </div> </div> 

Answer 1

Quickfix

Change class="fa fa-unlock" to class="fa {{ user.IsActive == true ? 'fa-lock' : 'fa-unlock' }}"

Answer 2

You can use ngClass to accomplish that:

<button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user.SubscriptionId)">
    <i [ngClass]="['fa', user.IsActive ? 'fa-lock' : 'fa-unlock']" aria-hidden="true"></i>
</button>