@inputに基づいてAngular2のngClassを評価することはできません

Question

@ inputから来ている属性に基づいて条件付きでdivにdivを適用しようとしていますが、同じ条件がnot @ input （下のtest_activeなどの）属性は、式が正常に動作します。

init（）関数でconsole.log（）プロパティの値を取得できますが、適切な値が得られます。ここで

は私のコンポーネント

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

@Component({ 
    selector: 'app-avatar', 
    template: ` 
    <div 
     id="avatar" 
     [ngClass]="{'active': active?true:false, 'inactive': active?false:true}" 
    ></div> 
    `, 
    styles: [ 
... 
    `#avatar.active { border-color: #77ED00;}`, 
    `#avatar.inactive {filter: grayscale(100%); border-color: red}` 
    ] 
}) 
export class AvatarComponent implements OnInit { 

    @Input() active; 

    test_active = true; 


    constructor() { } 

    ngOnInit() { 
    console.log(this.active); //true 
} 


} 

Answer 1

のサンプル・コードである私は、あなたが入力する文字列として値を渡すと仮定します。

は重要なあなたがリストされているCSSクラスは、固体国境border-style: dashed上のスタイルを持っていない、またはそう何でも彼らはDOMへのクラス名を追加以外の描画にゼロ違いを作る

<app-avatar [active]="true"></app-avatar> 
<app-avatar [active]="false"></app-avatar> 

Answer 2

を試してみてください。しかし、入力は確実に正しく適用されています。

[ngClass]="{'active': active, 'inactive: !active}"のように、不要な3つのターナーを保存することをお勧めします。