角度2客戶端條件

Question

我試圖在“阻止/取消阻止圖標”按鈕上調用api以阻止和取消阻止用戶。 現在，我想問一下，如果用戶處於活動狀態以在活動對象前面顯示解鎖圖像，反之亦然，該如何更改圖標圖像。

圖片

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

快速解決

將class="fa fa-unlock"更改為class="fa {{ user.IsActive == true ? 'fa-lock' : 'fa-unlock' }}"

Answer 2

您可以使用ngClass來實現：

<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>