angular 2客户端条件

Question

我正在尝试调用api on block/unblock图标按钮来阻止和取消阻止用户。现在我想问一下，如果用户处于活动状态，我如何才能将图标图像更改为在活动状态之前显示解锁图像，反之亦然。

图像

​

​

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>

​