ngClass 有没有更好的方法让样式始终存在并根据条件添加其他样式答案

【问题标题】：ngClass is there a better way to have a style always present and add other based on conditionngClass 有没有更好的方法让样式始终存在并根据条件添加其他样式
【发布时间】：2021-08-28 03:04:21
【问题描述】：

我对 ng-class 非常陌生，我需要始终将默认类应用于跨度并在发生某种情况时添加另一个类

<span
    [ngClass]="{'timeString': true, 'disabledText': conditionalExpression}">
</span>

我的 CSS 包含：

.timeString{
    width: 50px;
}

.disabledText {
    color: rgba(0, 0, 0, 0.38);
}

我检查了类似的问题，但没有找到我要查找的内容。

基本上我想摆脱'timeString': true 部分

【问题讨论】：

请随时发布答案，以便我感谢您的帮助，谢谢
这不是回答你的问题吗？ stackoverflow.com/a/68520866/16497617
@ManeeshaIndrachapa 似乎也类似于 stackoverflow.com/questions/35269179/…，但标题和措辞与我的搜索方式不匹配 - 谢谢

标签： html css angular

【解决方案1】：

你可以试试这个

<span class="timeString" [ngClass]="{'disabledText': conditionalExpression}"></span>

【讨论】：

【解决方案2】：

另一种方法是传递一个类数组


// you would add more classes when needed somewhere in your component
// based on your logic

public myClassList = ['timeString'];

<span [ngClass]="myClassList"> </span>

【讨论】：

listClass 是动态的，所以我必须在属性或类似属性中保持更新？所以对于更复杂的场景，这可能很有用
是的，这将是您组件中的一个属性，您可以在不调整模板的情况下添加或删除多个类。
在我的情况下，问题是要评估的表达式非常复杂，它取决于许多变量，并且保持属性更新，此时每次更新任何变量都非常复杂。所以此时有模板上的条件会更好谢谢
与模板中的条件相同。当角度变化检测运行时，它将一直被评估。至于我的示例，您还可以使用函数getClassList() 放置条件逻辑并返回数组。但是如果你只有一个动态类，那么接受的答案就可以了。
我不是在谈论它何时被评估，我说的是当前代码依赖于在许多方法中设置的许多布尔标志，并且保持更新的类列表将是一个很多不需要的工作。也永远不要从 Angular 模板调用方法 - betterprogramming.pub/…