如何在 HTML 表格中将参数从 Angular 传递给 CSS答案

【问题标题】：How to pass parameter from Angular to CSS in HTML table如何在 HTML 表格中将参数从 Angular 传递给 CSS
【发布时间】：2019-09-20 22:19:58
【问题描述】：

我在 Angular 网络应用中有 HTML 表格。通过服务从数据库中获取数据并显示为文本。

其中一列是状态，所以我需要将该变量显示为文本，而不是文本，但作为某种颜色的圆圈，所以如果该单元格值为“绿色”，它应该显示为绿色圆圈。

这就是我所拥有的。

CSS（组件样式的一部分）：

:host ::ng-deep td.circle { 
  text-align: center;
  font-size: 0;
  background-color: RED;  <---  need to pass param here
}

我将该列定义为：

.circle {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

HTML：

<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>

该表的 TS：在构造函数中：

this.data =  {
  headers: [],
  rows: []
};

ngOnInit() {
  this.tableMetricsService.getTableMetrics(
     JSON.parse(this.attrs).api,
     this.monthSelected
  ).subscribe(response => {
    this.data = response;
    }
  );
}

知道如何将单元格值“翻译”成 CSS 背景色吗？

TIA，

奥列格。

【问题讨论】：

如果我告诉你你不能怎么办？而是有一个将颜色更改为红色的类和一个将其更改为绿色的类。然后使用 ngClass 有条件地添加类，使其成为正确的颜色。
标题把我弄糊涂了！
我建议您不要在 ts 文件中处理设计内容（css 更改）。相反，您可以使用 [ngClass] 或 [class] 并根据您的数据库响应在 html 中动态更改类。通过这个链接angular.io/api/common/NgClass

标签： css angular typescript

【解决方案1】：

您可以在 html 上放置一个数据属性并编写相应的选择器：

[data-status="green"] {
  background: green;
}

[data-status="red"] {
  background: red;
}

<div data-status="green">Green</div>
<div data-status="red">Red</div>

但我认为这种方法与使用常规 css 类相比没有任何优势：

.green {
  background: green;
}

.red {
  background: red;
}

  <div class="green">Green</div>
  <div class="red">Red</div>

【讨论】：

Ray Hatfield，所以对于您以后的代码示例，如果我进入 td.circle.red 和 td.circle.green，如果单元格值为“红色”或'绿色'？该列是外部数据库中的类圈子（一种数据驱动的开发），我认为我不能真正在提到的 HTML 中添加一些东西。
我不熟悉 Angular 的工作原理，但您肯定可以控制表格中呈现的 html。如果不能在td上放一个类，能不能把文本换成一个div？
实际上我得到了的 HTML 并尝试了类似：

还是显示白色圆圈，只能看到圆圈的阴影。
你能在开发工具中检查它，看看发生了什么吗？如果无法查看您的 CSS，我无法对其进行故障排除。

【解决方案2】：

这对我有用：
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass"> </div>

【讨论】：