使用带有布尔变量的Angular [ngClass]

Question

我有一个Angular 5网站，此页面有一个过滤器图标栏。我在用户点击图标后尝试应用其他filter-selected css类 - 当然，再次点击时会将其关闭。

我试图使用hostFilter var打开/关闭，但没有成功。 是的，我已经在我的组件中初始化了这个var：

  hostFilter = false;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是默认情况下的样子：

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

建议表示赞赏......

***** 更新 ********

我根据下面的答案更新了我的(click)事件代码。我的逻辑运算符!位于错误的位置。

Answer 1

一个简单的解决方案是：

<i class="selected-node square host" [class.filter-selected]="hostFilter"></i>

Answer 2

锚标记上的(click)侦听器函数没有执行任何操作。 hostFilter!=hostFilter永远是假的;它没有赋值。您要切换值的目的是：

(click)="hostFilter = !hostFilter"

过去，你可以抛弃[ngClass]绑定整个对象。只需为元素提供它应该具有的类，并在'toggleable'类上使用类绑定：

<i class="selected-node square host" [class.filter-selected]="hostFilter"> </i>