Question

我尝试使用以下内容更改表格中单元格的颜色：

<table style="border: 1px solid black;">
    <thead>
        <tr style="border: 1px solid black;" *ngFor="let row of tableData">

            <td style="border: 1px solid black;"
                *ngFor="let column of row" class="{{ column }}"
                [ngClass]="{'selected': column == val }"
                [ngClass]="{'toChange': clicked}"
                (click)="clicked = !clicked">
                {{ column | uppercase }}
            </td>
        </tr>
    </thead>
</table>

在循环期间创建每个单元格时，它还会添加一个与css样式相对应的单击事件。但是，一旦单击一个单元格，我就不会改变颜色。

作为参考，css是：

toChange {
     background-color: blue;
}

任何人都在向我解释为什么我的代码不起作用？非常感谢！

Answer 1

您有两个[ngClass]指令。把它们放在一个单独的用逗号分隔它们：

[ngClass]="{'selected': column == val, 'toChange': clicked}"

Answer 2

一个问题可能是两个[ngClass]这样做，你不应该在元素<{1}}上有更多问题

[ngClass]

或者您可以这样做以使其更具可读性代码

以下将根据您的评论工作，只需要点击单元格 <td style="border: 1px solid black;" *ngFor="let column of row" class="{{ column }}" [ngClass]="{'toChange': clicked, 'selected': column == val }" (click)="clicked = !clicked"> {{ column | uppercase }} </td>

Dunno if I'm pushing
  my luck here man but do you know any amendments I could do to colour
  the specifically clicked cell rather than the whole table?

Answer 3

试试这个：

[class.toChange]="column == val"

（单击）和[ngClass]不更改表格单元格颜色

3 个答案: