角度中类名的条件渲染

Question

我是角度新手，我在过去2天遇到过如何在角度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'"

只改变的字符串是这两个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>