以角度条件渲染类名

Question

我是 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

Answer 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>