Typescript 如何使用 CSS 更改行背景颜色答案

【问题标题】：Typescript How to change TH row background color with CSSTypescript 如何使用 CSS 更改行背景颜色
【发布时间】：2021-04-21 15:16:08
【问题描述】：

问题很简单，但我阅读了很多其他答案，但没有一个能让我满意。所以我的问题是我有一个表格，我想改变行的背景颜色，标题取决于 TEAM 对象，每个团队都有特定的颜色。

我有一个提供团队列表的下拉列表。当我选择一个团队时，我可以修改我的变量并将名称放入我的变量中并将颜色放入另一个变量中。

在我的组件 HTML 中，我有：

    <!-- Header row third group -->
<ng-container matColumnDef="header-row-third-group">
  <th mat-header-cell *matHeaderCellDef [attr.colspan]="5" class="tableHeaderCellDivThirdrRow"> {{teamName(2)}}
  </th>
</ng-container>

CSS 文件：

.tableHeaderCellDivThirdrRow { 
   background-color: green;  
}

我将 teamName1 和 teamColor 传递给组件。我正在调用一个从主组件接收的变量中获取名称的函数：

TS 文件：

@Input() teamName1: string;
@Input() teamColor1: string;

public teamName(_teamId) {
if (_teamId == 1) {
  return this.teamName1
}
if (_teamId == 2) {
  return this.teamName2
}

}

所以在我的组件中，我可以轻松打印团队名称。但我想在我的 TS 文件中，将我的 CSS 背景颜色：从绿色更改为参数 teamColor1。

现在我正在使用 SCSS 文件，（我读到我无法修改 SCSS 文件），但如果更容易，我可以将其更改为 CSS 文件。我读到的几乎回答在 CSS 文件中预定义了颜色。我不希望这样，因为如果我添加一个具有新颜色的团队，我不想来更改 CSS 文件。

感谢您的帮助。

【问题讨论】：

标签： css angular typescript

【解决方案1】：

你可以试试这个：

<th mat-header-cell [style.background-color]="teamColor1" *matHeaderCellDef [attr.colspan]="5"> {{teamName(2)}} </th>

【讨论】：

感谢您的回答。但这正是我不想要的答案。如果您阅读了我的问题的最后一行，我说：我读到的几乎回答是在 CSS 文件中预定义了颜色。我不希望这样，因为如果我添加一个具有新颜色的团队，我不想来更改 CSS 文件。
我明白了。你可以试试这个吗：<th mat-header-cell [style.background-color]="teamColor1" *matHeaderCellDef [attr.colspan]="5"> {{teamName(2)}} </th>.
感谢内纳德。我使用 [style.background-color]="this.Color1" 。在我的 TS 文件中，我只写了这个：this.Color1 = this.teamColor1.BackgroundColor;
很高兴这对您有所帮助。如果对您有帮助，请考虑批准并接受我的回答。
我对你的评论投票。答案不是很好，但你的评论是。我不能投票给答案，因为它没有反映现实。但你可以看到我为你的评论投票！