代码之家 › 专栏 › 技术社区 › bob.mazzo

将角度[ngClass]与布尔值var一起使用

css angular

bob.mazzo · 技术社区 · 8 年前

我有一个Angular 5网站,这个页面有一个过滤器图标栏。我正在尝试应用额外的 filter-selected 一旦用户单击图标,css类-当然,再次单击时将其关闭。

我正在尝试使用 hostFilter var打开/关闭,但未成功。是的,我已经在我的组件中初始化了这个var:

  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>

以下是默认情况下的外观: