具有 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 值的外部定界符，请对属性使用双引号。（或者，如果属性名称中没有破折号，则使用其中的 none 个）。

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

Ngclass function with 2 objects