Question

我正在创建一个有角度的2应用程序，其中我有一个表格，我想在其中动态更改元素的背景颜色。

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

我想要的是将第5行的颜色更改为绿色，将第6行的颜色更改为红色。选择改变颜色的rwo是动态的。

非常感谢帮助。

Answer 1

经过多次尝试，我完成了这项工作。

我已编辑此行...

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

rowNum由ramdon函数Math.random（）生成。

Answer 2

这取决于＆＃34;动态＆＃34;意味着在这种情况下（在代码中定义，用户需要选择它等等）。在任何情况下，我认为这个plunker：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>

成分：

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

通过这种方式，您可以随时将greenIndex和redIndex设置为您想要的任何内容。

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>

注意：让x = index允许你检查迭代索引...... 因为索引计数从0开始，然后x == 4将是你的第5个元素而x == 5将是你的第6个... colorGreen - 绿色类，colorRed - 红色类。

希望这有帮助

以角度2动态改变特定元素的颜色

4 个答案: