ngClass補間が機能しない

Question

以下のアイコンコンポーネントを考えてみましょう。 color変数が補間されるのではなく、色としてそのまま残るのはなぜですか？

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は式3種類の

1. ストリング式
2. 配列式
3. オブジェクトExpressio N

を受け付け

使用しているものはオブジェクト式です。オブジェクト式では、キーは、値で指定された式が真理値に評価されたときに追加されるCSSクラスです。そうでない場合、それらは削除されます。したがって、キーは常に式ではなく文字列と見なされます。

目的のために、以下のように文字列式を使用できます。

[ngClass]="color" 

または

[class]="color" 

参照してください：Angular ngClass API doc

Answer 2

をお好きな文字列式を渡すことができます。

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

またはcolor

のバインディング classを使用210

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