首页 文章

Angular 2通过插值为ngClass添加值

提问于
浏览 次
4

假设我在数组中有一些对象（让我们调用数组"items"），如 { title: "Title", value: true } ，我使用ngFor来显示它们：

<h1 *ngFor="let item of items">{{ item.title }}</h1>

现在假设我想根据item.value是true还是false来显示h1上的类 . 我怎样才能做到这一点？

我无法添加 [class.some-class]="{{ item.value }}" . 基本上，我如何才能将当前项的真值或假值变为类似于ngClass的值？我在Angular 2中错过了一个明显的方法吗？

（顺便说一句，我知道我可以通过将 class="{{ item.value | pipe }}" 添加到h1并管理值并根据值true和false返回正确的类来实现它，但似乎应该有更好的方法 . ）

谢谢

angular ng-class

5 回答

  • 2

    您可以添加如下条件类：

    <h1 *ngFor="let item of items" 
     [class.some-class]="item.value === true">
     {{ item.title }}
</h1>

    请记住， *ngFor 语法实际上扩展为 template . 在您的示例中，它将扩展为：

    <template ngFor let-item [ngForOf]="items">
    <h1 [class.some-class]="item.value === true">
       {{ item.title }}
    </h1>       
</template>

    当您看到它展开时，您可以看到为什么您能够将 [class.xyz] 指令与 item 的模板输入变量一起使用 .

    回复于
  • 1

    使用ngClass获取动态值（其中dynamicValue可以是组件内的@Input（））：

    <div [ngClass]="[dynamicValue]"></div>

    也可以用于多个值：

    <div [ngClass]="[dynamicValue, secondDynamicValue, thirdDynamicValue]"></div>

    在某些情况下，您可能希望将动态值与条件类组合 . 这可以这样做：

    <div [ngClass]="[dynamicValue, (isRounded ? 'rounded' : '')]"></div>

    这将应用动态值类名称，并且还将有条件地应用'round'类，以防isRounded为true .

    回复于
  • 0

    你不应该插入它 . 只需忽略 {{}} . 这会将其插入到字符串中 . 离开那些将给你布尔值，这对 [class.some-class] 完全有效

    [class.some-class]="item.value"

    其他选择

    如果您有几个不同的类，也可以使用内联的对象表示法或从组件中获取对象表示法 . 基本上属性是css类，值是true / false

    [ngClass]="{'some-class': item.value }"

    或者从组件中获取对象

    getClasses(value) {
  return { 'some-class': value }
}

[ngClass]="getClasses(value)"

    See Also

    回复于
  • 0

    您可以在h1标记中迭代并使用ngClass .

    <h1 *ngFor="let item of items" [ngClass]="{'cssClass': item.value }">{{ item.title }}</h1>
    回复于
  • 4

    如果要直接使用item.value . 作为布尔值 . 使用：

    [ngClass.class-you-want-add] = "item.value === true"

    如果你想要一个直接返回布尔值而不是布尔值的函数 . 例如，要评估value是否是您想要的字符串：

    [ngClass] = "{'class-you-want-add' : isValue("OneValue")}"

    存在：

    isValue(val:string) {
   return this.item.value == val;
}
    回复于

相关问题