特定の色を​​の要素を動的に変更する2

Question

私は要素の背景色を動的に変更したい表がある角度2のアプリケーションを作成します。

<table> 
<tr *ngFor="let i of rows"> 
<td>blank</td> 
<td [style.color]="color">data</td> 
</tr> 
</table> 

私がしたいのは、5行目の色を緑色、6行目を赤色に変更することです。 色を変更するための選択肢は動的になります。

助けていただければ幸いです。

Answer 1

に役立ちます。

<td [style.background-color]="i == rowNum ? 'red' : 'green'" ></td> 

私は、この行を編集した

...そしてたrowNumがramdon関数Math.randomによって生成されます（）。

Answer 2

この場合、「動的」とは何か（コードで定義されている、ユーザーが選択する必要があるなど）によって異なります。いずれにせよ、私はこのプランナーと思う：http://plnkr.co/edit/dIhoU1AbtD2SmEKjNkgXこれを達成するための最初のアイデアを与えることができます。

アイデアは、オブジェクトリテラルで、そのインデックスに基づいて行の色を定義することです：

private styles = { 4: "red", 5: "green" }; 

Answer 3

スタイルシート：あなたがそうcolorを使用（私もやっていますが、background-colorを述べ、その変更を検討？ ）

td.red-row { 
    color: red; 
} 

td.green-row { 
    color: red; 
} 

テンプレート：

<table> 
    <tr *ngFor="let i of rows; let j = index;"> 
     <td>blank</td> 
     <td [class.red-row]="j == redIndex" 
      [class.green-row]="j == greenIndex">data</td> 
    </tr> 
</table> 

コンポーネント：あなたはいつでも好きなときに好きなのgreenIndexとredIndexを設定することができ

private greenIndex: number = 4; 
private redIndex: number = 5; 

この方法です。

Answer 4

はこれを試してみてください：

<table> 
<tr *ngFor="let i of rows; ; let x = index"> 
<td>blank</td> 
<td [ngClass]="{colorGreen: x == 4, colorRed: x == 5}">data</td> 
</tr> 
</table> 

注：0からのインデックス数が、その後のx == 4はあなたの第五要素とXとなりますので聞かせてX =インデックスは、あなたは=反復... の指標を確認することができます= 5はあなたの6番目になります。 colorGreen - 緑色のクラス、赤色のcolorRedクラスです。

希望これは私が行ってしまった試みの多くの後