时间戳

首页 > 解决方案 > 具有 2 个对象的 Ngclass 函数

angular - 具有 2 个对象的 Ngclass 函数

问题描述

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

标签： angulartypescriptng-classng-style

解决方案

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

Stackblitz 演示

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

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

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

根据评论，您希望为元素动态设置一些属性。更合适的方法是使用styleor ngStyle。请参阅上面的 Stackblitz 演示以查看它的实际效果。

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

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

推荐阅读