Angular 2 add value to ngClass with interpolation

问题:

Lets say I have some objects in an array (lets call the array "items") like { title: "Title", value: true } and I use ngFor to display them like:

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

Now lets say I want to display a class on the h1 based on if item.value is true or false. How can I do that?

I can't add [class.some-class]="{{ item.value }}". Basically, how can I get the true or false value for the current item into something like ngClass? Am I missing an obvious way to do this in Angular 2?

(Btw, I know I can do it by adding class="{{ item.value | pipe }}" to the h1 and piping the value and returning the correct class based on the values true and false, but it seems like there should be a better way.)

Thanks

回答1:

You can add a conditional class like this:

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

Remember that the *ngFor syntax actually expands into a template. In your example, it would expand into:

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

When you see it expanded, you can see why you're able to use the [class.xyz] directive with a template input variable of the item.

回答2:

Using ngClass for dynamic values (where dynamicValue can be @Input() inside the component):

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

Can also be used for multiple values:

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

In some cases you may want to combine dynamic values with a conditioned class. This can be done like this:

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

This will apply a dynamic value class name and will also conditionally apply the 'rounded' class in case isRounded is true.

回答3:

You shouldn't interpolate it. Just leave out the {{}}. This will interpolate it to a string. Leaving those out will give you the boolean value, which is perfectly valid for [class.some-class]

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

Other options

You can also use object notation either inline or taken from the component, if you have a few different classes. Basically the property is the css class, and the value is the true/false

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

Or get the object from the component

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

[ngClass]="getClasses(value)"

See Also

• Template Syntax: NgClass

回答4:

You can iterate and use ngClass in h1 tag.

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

回答5:

If you want to use item.value directly. Being a boolean value. Use:

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

If you desire evaluate a function that returns a boolean instead a boolean value directly. For example to evaluate if value is your desired string:

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

being:

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