具有 2 个对象的 Ngclass 函数答案

【问题标题】：Ngclass function with 2 objects具有 2 个对象的 Ngclass 函数
【发布时间】：2020-09-10 23:20:54
【问题描述】：

是否可以将 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}"

【问题讨论】：

【解决方案1】：

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

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

对于每个 cmets，您希望为您的元素动态设置一些属性。更合适的方法是使用style 或ngStyle。请参阅上面的 Stackblitz 演示以了解它的实际效果。

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

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

【讨论】：