如何在 div 元素中的类上应用条件答案

【问题标题】：how to apply condition on class in a div element如何在 div 元素中的类上应用条件
【发布时间】：2020-05-14 13:05:15
【问题描述】：

如何将 CSS 类条件应用到下面的 div 元素

我尝试了下面的代码，但它不起作用

  <div Class="{toolsMenuWidthSet==true?'dropdown-menu dropdown-menu-right dropdown-custom-width-links':'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

如果 toolsMenuWidthSet 为真，则应用“dropdown-menu dropdown-menu-right dropdown-custom-width-links”，否则应用“dropdown-menu dropdown-menu-right dropdown-custom-width-links-2”

【问题讨论】：

看到这个Link

标签： angular typescript

【解决方案1】：

您的语法错误。在 Angular 中有一个名为 ngClass 的指令，您可以像这样使用它

 <div [ngClass]="toolsMenuWidthSet == true ? 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' : 'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

但如果你不想使用ngClass 指令，那么你也可以像这样使用角度绑定

<div class="{{toolsMenuWidthSet == true ? 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' : 'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'}}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

【讨论】：

如果我们使用 ngclass 我们需要导入一些东西吗？正如我尝试过的，但它对我不起作用
不，我的回答中有错字。我更新了我的答案，请查看更新的答案
这是可行的，但我的 css 样式在所有项目都进入 div 水平之前没有按预期应用，现在它是垂直的
如果我输入 class= 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' 它是水平的
这是因为最后一个 CSS 没有被应用

【解决方案2】：

使用 [ngClass]

 <div [ngClass]="{'dropdown-menu':toolsMenuWidthSet, 'dropdown-menu-right dropdown-custom-width-links':toolsMenuWidthSet, 'dropdown-menu': !toolsMenuWidthSet, 'dropdown-menu-right dropdown-custom-width-links-2':!toolsMenuWidthSet}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

CSS 类更新如下，具体取决于表达式求值的类型：

string - 添加字符串中列出的 CSS 类（空格分隔），

Array - 添加声明为 Array 元素的 CSS 类，

对象 - 键是 CSS 类，当值中给出的表达式计算为真值时添加，否则将被删除。

Doco:https://angular.io/api/common/NgClass

【讨论】：

这不起作用。我是否需要导入一些东西，因为没有任何 CSS 被应用到这个 div 元素
对不起，你需要分开每个类..会更新答案..不，你不需要导入任何东西
尝试渲染 toolsMenuWidthSet {{toolsMenuWidthSet}} 以查看其值。
{{toolsMenuWidthSet}} 很好
嗯。你能把你的代码放在stackblitz上和你一起检查吗？不知道为什么它不起作用

【解决方案3】：

使用这个，它工作正常。

<div class="dropdown-menu dropdown-menu-right" 
    [ngClass]="toolsMenuWidthSet==true ?
    ' dropdown-custom-width-links' : 
    ' dropdown-custom-width-links-2'"
    aria-labelledby="dropdownMenuButton" 
    id="appsDropdownPopup">

【讨论】：