有角度的类名称的条件渲染

Question

我是angular的新手，最近两天在如何在angular 2中连接动态类名时遇到了这个问题。就像react.js className=this-is-a-str${isFoo? 'add this' : 'then this'}中的这段代码在angular中那样。这是我在安瓜尔的代码。

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