以角度条件渲染类名

Posted 2023-03-16

【中文标题】以角度条件渲染类名

【英文标题】：conditional rendering of class name in angular

【发布时间】：2019-07-16 18:36:32

【问题描述】：

我是 Angular 的新手，前 2 天我遇到了关于如何在 Angular 2 中连接动态类名的问题。就像 react.js className=this-is-a-str$isFoo? 'add this' : 'then this' 中的这段代码一样。这是我的 anguar 代码。

[className]="getDesignStatus(design).hasError ? 'project--btn btn btn-action btn-danger-invert col-md-3 col-lg-3' : 'project--btn  btn btn-action btn-primary-invert col-md-3 col-lg-3'"

唯一改变的字符串就是这2个btn-danger-invert && btn-primary-invert

【参考方案1】：

只需将 className 重命名为 ngClass 并使用常规 html 类属性添加静态类

<div 
  class="project--btn btn btn-action col-md-3 col-lg-3" 
  [ngClass]="getDesignStatus(design).hasError ? 'btn-danger-invert' : 'btn-primary-invert'"
></div>

【讨论】：

天哪，老兄。你救了一条命！非常感谢！

别担心，伙计:)