角度: NgClass -分组条件

Question

有办法简化这个ngClass吗？

• edit？-这个工作fine
• value === -这是一个子组件。两个父组件中的每一个都将value属性作为@输入向下传递。子组件1具有released属性。子组件2没有released属性。
• 如果value是value1，而released属性是true，则不添加任何类。但是，如果released属性是false添加一个名为false value is value2的类，则始终添加class-3，因为没有released属性。

下面的工作，但它觉得它可以流线型。

<div [ngClass]="[
 edit ? 'class-1' : 'class-2',
 value === 'value1' && released ? '' : 'class-3',
 value === 'value2' ? 'class-3' : ''
]">

Answer 1

你可以通过转到课堂上来优化它的一部分，它要短得多，也很简洁：

<div [class.class-3]="(value === 'value1' && !released) || value === 'value2'"
... /the rest of the ngClass for edit
</div>

或者把它都保存在ngClasse中。它也可以缩短：

<div [ngClass]="[
 edit ? 'class-1' : 'class-2',
 released ? value != 'value1' || value==='value2'? : 'class-3' : ''
]">

Answer 2

你真的有一个复杂的情况，这是我能想到的最好的：

<div
  [ngClass]="{
    'class-1': edit,
    'class-2': !edit,
    'class-3': value === 'value2' || (value === 'value1' && !released)
  }"
></div>