メソッド呼び出しと変数を持つNgClassの配列

Question

{currentWeek: true}のようなオブジェクトを返すメソッド呼び出しで[ngClass]を使用したいと思います。値rejectedを持つことができるvar week.stateを追加します。

私は、HTMLは次のようになりますことをしたい：<div class="currentWeek rejected"></div>が、私はそれを使用するときに、私はこのエラーを取得：

Error in ./FlexCalendar class FlexCalendar - inline template:29:13 caused by: NgClass can only toggle CSS classes expressed as strings, got [object Object]

私はngClassにメソッド呼び出しと変数を組み合わせることができますどのように？ [ngClass]=[setWeekClasses(week), week.state]

setWeekClasses(week: Week): Object { 
    let state: string = this.state(week.state); 
    return { 
     'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(), 
     [week.state]: true, 
    }; 
} 

Answer 1

ような何かあなたがngClassのクラス文字列を構築するための方法および変数を使用することができます。例えば

はこちらの方法を提供するクラスとクラス情報を提供するオブジェクト変数を参照してください：テンプレートで

class { 

    getCSSClass() { 
    return { state: "rejected" } 
    } 

week:object = { 
    state: 'rejected' 
    } 
} 

、あなたがngClassためのクラス文字列を構築するための方法および変数を使用することができます。

<div [ngClass]="getCSSClass().state + ' currentWeek'">"> 
     <h2>Hello {{name}}</h2> 
    </div> 

またはあなたが書くことができます。plunkerでここ

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [ngClass]="week.state + ' ' + getCSSClass().state"> 
     <h2>Hello {{name}}</h2> 
    </div> 
    `, 
}) 

チェック：http://plnkr.co/edit/JfN5cjbCjNAUs8qx9oh1

Answer 2

メソッドや関数への結合は落胆し、新しいオブジェクトのインスタンスを返すことが特に悪いです。

あなたは、少なくとも結果をキャッシュする必要があり

oldWeek; 
oldStyles; 
setWeekClasses(week: Week): Object { 
    if(this.oldWeek != week) { 
     let state: string = this.state(week.state); 
     this.oldStyles = { 
     'currentWeek': week.weekNumber === this.selectedDate.getWeekNumber(), 
     [week.state]: true, 
     }; 
     this.oldWeek = week; 
    } 

    return this.oldStyles; 
} 

あなたは

[ngClass]="setWeekClasses(week)" 

このngClassは、文字列をサポートしているので

[ngClass]=[week.state, getWeekState(week)] 

が無効である結合、リストのようにそれを使用することができます文字列のオブジェクトと文字列の値を持つオブジェクト[week.state, getWeekState(week)]結果サポートされていない文字列とオブジェクトを含むリスト内に存在します。