有条件地以角度显示/隐藏图标

Question

您好，

以下代码显示了引导铃声通知图标和模板中的红色圆圈。

<a href dropdownToggle (click)="false">
        <i class="glyphicon glyphicon-bell notification-icon">
         {{cookieData.search_unread_count}}
        </i>
</a>

此代码{{cookieData.search_unread_count}}将从组件中获取计数，并将计数添加到红色圆形图标上方的响铃图标上。这里的挑战是我想隐藏图标，如果计数是0，那么我想隐藏在钟上方的红色圆圈，如果计数大于0，那么我必须在钟形图标上方显示红色圆圈。

如此有条件地添加这个？

Answer 1

尝试这样：

<i class="glyphicon glyphicon-bell" [ngClass]="cookieData.search_unread_count != 0 ? 'notification-icon': ' '"></i>

更新的答案：

<i class="glyphicon glyphicon-bell" [ngClass]="cookieData.search_unread_count != 0 ? 'notification-icon': ' '">
    <span *ngIf="cookieData.search_unread_count != 0">
        {{cookieData.search_unread_count}}
    </span>
</i>

Answer 2

您正在寻找*ngIf，请参阅下面的

<a href dropdownToggle (click)="false" *ngIf="cookieData.search_unread_count > 0">
    <i class="glyphicon glyphicon-bell notification-icon">
        {{cookieData.search_unread_count}}
    </i>
</a>

这只会在计数大于0时显示图标。

最好使用*ngIf与[hidden]相关联，因为*ngIf实际上删除了html，而不只是在元素中添加display: none;。