angular - 将Angular [ngClass]与 bool var一起使用

我有一个角度5网站，这个网页有一个过滤器图标栏。我试图在用户单击图标后应用附加的css类，当然，再次单击时将其关闭。
我试图使用filter-selected变量来打开/关闭，但没有成功。
是的，我已经在组件中初始化了这个变量：

  hostFilter = false;

<div class="row">
    <div class="node-selection">
        <a href="javascript:void(0)" title="Hosts" (click)="hostFilter!=hostFilter; rebuildTrees(1)">
            <i [ngClass]="{
                'selected-node square host filter-selected' : hostFilter,
                'selected-node square host' : true
                }">
            </i>
        </a>
        <a href="javascript:void(0)" title="Host Access Points" (click)="rebuildTrees(2)"><i class="selected-node square host-access"></i></a>
        <a href="javascript:void(0)" title="Storages" (click)="rebuildTrees(5)"><i class="selected-node circle storage"></i></a>
    </div>
</div>

<style>
.selected-node.square.host {
        background-color: #40923b;
        border-radius: 5px;
        border: wheat;
        border-style: solid;
        border-width: 1px;
    }
.selected-node.square.host.filter-selected {
      box-shadow:
      0 1px 2px #fff,
      0 -1px 1px #666,
      inset 0 -1px 1px rgba(0,0,0,0.5),
      inset 0 1px 1px rgba(255,255,255,0.8);
}
</style>

默认情况下是这样的：

如果我强迫它出现，它看起来像这样：

谢谢你的建议…
*****更新********
我根据下面的答案更新了我的hostFilter事件代码。我的逻辑运算符(click)在错误的位置。

最佳答案

锚标记上的(click)侦听器函数没有任何作用。hostFilter!=hostFilter将始终为false；它不分配值。要切换该值，需要执行以下操作：
(click)="hostFilter = !hostFilter"
在此之后，您可以放弃绑定整个对象的[ngClass]。只需为元素提供它应该始终拥有的类，并对“toggleable”类使用类绑定：
<i class="selected-node square host" [class.filter-selected]="hostFilter"> </i>