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

Answer 1

的QuickFix

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

Answer 2

您可以使用ngClass来实现这一目标：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="divStatus">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>