有条件地更改角度组件的 CSS答案

【问题标题】：Change conditionally CSS of angular component有条件地更改角度组件的 CSS
【发布时间】：2018-08-29 10:54:16
【问题描述】：

我会根据变量值改变 p-autocomplete 组件的样式

我有一个切换输入来确定我的变量是真还是假

  <div class="switch-inner">
     <p [ngClass]="{'businessG': !toggle }" class ="toggle-inline ">Business group</p>
     <div class="toggle-btn toggle-inline">
        <label class="switch">
        <input type="checkbox" [(ngModel)]="toggle">
        <span class="slider round"></span>
        </label>
     </div>
     <p [ngClass]="{'borrower': toggle }" class="toggle-inline">Borrower</p>
  </div>

然后我使用这个值来设置悬停时我的建议项背景的样式。

实际上我使用的是通过 ::ngdeep 更改的默认颜色

::ng-deep .ui-autocomplete-list-item:hover{
    background-color: #24B3C7; // would change this to another color
    font-family: 'BNPPSans';
    border-radius: 0
}

我会根据切换变量的值更改背景颜色。

这是我的组件 html

<div class="container" id ="inputSearchPage">
<div class="search-input col-md-6 col-sm-6 ui-fluid" >
   <p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
   emptyMessage={{noBorrowerResult}} 
   [minLength]="3"
   [size] = "40"
   field = "name"
   >
   <ng-template let-elm pTemplate="item" class="suggestion-item" >
      <div >{{elm.name}} ( ID: {{elm.code}} )</div>
      <div class="add-button">+</div>
   </ng-template>
   </p-autoComplete>
</div>

如何根据切换值设置背景颜色？（如果为真，则将::ng-deep .ui-autocomplete-list-item:hover背景色设置为颜色1，否则设置为颜色2）

【问题讨论】：

您有问题吗？问题是什么？
我已经更新了我的问题

标签： html css angular typescript primeng

【解决方案1】：

您可以使用 ngStyle，但目前不支持悬停，因此您必须使用 mouseenter 和 mouseleave 来解决它。

所以在你的html中你可以添加

[ngStyle]="(hover && toggle) ? { 'background-color': 'someColor' } : { 'background-color': 
'anotherColor' }" (mouseover)="hover=true" (mouseleave)="hover=false"

【讨论】：

不工作，因为我还应该检查切换的值

【解决方案2】：

最好的方法是使用 hostListeners - 'mouseenter' 和 'mouseleave'

【讨论】：