テンプレート解析エラー：Angular 2の既知のネイティブプロパティではないため、 'ng-class'にバインドできません。

Question

ブール値 'isLoginPageの値に基づいてimg属性に条件付きでCSSスタイルを適用しようとしています'をAngular 2.0.0-beta.15に設定します。 HTMLの部分は以下の通りである：

<a class="navbar-brand" href="#/"> 
    <img src="/src/resources/images/logo.png" [ng-class]="{logoStyle: isLoginPage, navLogoStyle: !isLoginPage}" /></a> 

logoStyleとnavLogoStyleは、CSSクラスに言及し、その主なHTMLページに追加されます。対応する構成要素には、以下のように、私はisLoginPageの値を設定しています：

import {Component, Input} from 'angular2/core'; 
import {NgClass} from 'angular2/common'; 

@Component({ 
selector: 'header', 
inputs: ['isLoginPage'], 
templateUrl: './header.html', 
directives: [ROUTER_DIRECTIVES, RouterLink, NgClass] 
}) 
export class HeaderComponent { 
    isLoginPage: boolean; 
    constructor(){ 
    if(condition){ 
    this.isLoginPage = true; 
    } 
    } 

をしかし、私は結果を見しようとしていたときに、スタイルが適用されず、エラー「テンプレートの解析エラー： がバインドできません'ng-class'は既知のネイティブプロパティではないため表示されます。誰かが私を導くことができますか？

Answer 1

Angular2では、パーサーはcamelCaseディレクティブの名前を探します。だからあなたの場合には、あなたはそれが実際に `camelCase`だngClass

<img src="/src/resources/images/logo.png" [ngClass]="{logoStyle: isLoginPage, navLogoStyle: !isLoginPage}" /></a> 

You can see the documentation for the implementation here