ngClass-Interpolation funktioniert nicht

Question

Betrachten Sie die folgende Symbolkomponente. Warum bleibt die Variable color als Wortfarbe erhalten, anstatt interpoliert zu werden?

import {Component, Input, OnInit} from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'nui-icon', 
    template: ` 
    <i class="material-icons" 
     [ngClass]="{color: true, 'bordered': border}" 
     [ngStyle]="{'font-size':size + 'px'}"> 
     <ng-content></ng-content> 
    </i> 
    `, 
    styles: [` 
    i { 
     display: inline-flex; 
    } 
    i.bordered { 
     border: 1px solid #d8d8d8; 
     border-radius: 50%; 
     padding: 15px; 
    } 
    `] 
}) 

export class NuiIconComponent implements OnInit { 
    @Input() color: string; 
    @Input() size: string = '24'; 
    @Input() border: boolean = false; 

    constructor() {} 

    ngOnInit() { 
    } 
} 

Answer 1

ngClass akzeptiert drei Arten von Ausdrücken

1. String Expression
2. Array Expression
3. Objekt Expressio n

Was Sie verwenden, ist Objektausdruck. In Objektausdrücken sind Schlüssel CSS-Klassen, die hinzugefügt werden, wenn der im Wert angegebene Ausdruck einen truthigen Wert ergibt, andernfalls werden sie entfernt. Der Schlüssel wird also immer als String und nicht als Ausdruck betrachtet.

Für Ihren Zweck können Sie String-Ausdruck wie folgt verwenden.

[ngClass]="color" 

oder

[class]="color" 

Siehe: Angular ngClass API doc

Answer 2

können Sie String-Ausdruck übergeben, wie:

[ngClass]="(border ? 'bordered ' : '') + color" 

oder class für color Bindung verwenden

[ngClass]="{ bordered: border }" [class]="color"