具有2个对象的Ngclass函数

Question

是否可以将2个对象添加到ngclass函数中，例如 <div class="progress-bar"[ngClass]="getProgressValues(obj.val1,obj.val2)"> </div> 我收到一个Json错误。

SyntaxError: JSON.parse: bad control character in string literal at line 1 column 2 of the JSON data

我尝试了“ {” val1“：1，” val2“：2}”

Answer 1

双引号和单引号混合：如果将双引号用作ngClass值的外部定界符，请对属性使用单引号。如果将单引号用作ngClass值的外部定界符，请对属性使用双引号。 （或者，如果属性名称中没有破折号，则不使用任何破折号。）

Stackblitz demo

<section [ngClass]="{val1: 1, 'other-att': 2}"></section>

从API的角度来看，与ngClass一起使用的对象属性的值应为true或false。在以上所有情况下，它们都是真实的，因此将应用val1和other-att类（并且有效，没有错误）。但是，如果将true或false用作它们的值，则更有意义：

<section [ngClass]="{c1: true, 'c-2': true, 'c3': false}"></section>

如果您想使用函数，也可以：

<section [ngClass]="_getMyCssClasses()"></section>

_getMyCssClasses(): {[className: string]: boolean} {
  return {c1: true, 'c-2': true, 'c3': false};
}

每个注释都想为元素动态设置一些属性。一种更合适的方法是使用style或ngStyle。请参阅上面的Stackblitz演示以查看其运行情况。

<div [ngStyle]="getProgressValues(obj.val1,obj.val2)"> </div>

getProgressValues(min: number, max: number) {
  return {
    'aria-valuemin': min,
    'aria-valuemax': max
  }
}