在角度应用程序中更改背景颜色答案

【问题标题】：Changing background color in angular application在角度应用程序中更改背景颜色
【发布时间】：2020-12-11 02:03:50
【问题描述】：

我正在开发一个角度应用程序。我在div 中有一个css 类，它具有font、padding、background-color 等一般属性。html 代码是这样的。

<div class="myCss">
  //my code
</div>

在 CSS 文件中，有这样的 css

div.myCss {
 color: white;
 font-size: 23px;
 background-color: yellow;
}

对于某种情况，我需要更改background-color。如果myFlag 为真，我希望background-color 为黑色，否则为黄色。我尝试使用ngClass，但在myFlag == true 时，我需要编写整个css 来更改background-color。有什么办法吗，我只能在标志的基础上更改background-color，而不是创建一个与以前的属性完全相同的新css类，只是改变背景颜色。

我在 html 中有如下表格：
1 2 3 4 5

在 css 类中，我有以下 css：

table th {
    border-collapse: collapse;
    color: white;
    background-color: #002BA4;
    padding: 3px 4px 3px 4px;
}

对于同一个标志，我也想更改这个th 的background-color。我该怎么做？

【问题讨论】：

代码编辑器未显示第 2 点中提到的表格。表格看起来像这样。 1 2 3 4 5 tr>
这就是你要找的东西：pluralsight.com/guides/attribute-class-style-bindings-angular
这能回答你的问题吗？ unable to change the background color in Angular using style binding

【解决方案2】：

有两种方法可以解决这个问题：

选项 1

创建一个变量来存储样式，例如，这将允许您能够在模板中多次使用此变量。

let color = myFlag? 'black' : 'yellow';

然后在您的模板中，您可以这样做：

<div [className]="color"></div>

但是，这只是设置类名，所以您仍然需要设置这些类的样式。

.black{
   background-color: black;
}

.yellow{
   background-color: yellow;
}

选项 2

您可以像这样使用样式绑定：

<div [style.backgroundColor]="!myFlag ? 'yellow': 'black'" ></div>

如果您希望更改 background-color，此选项将要求您编写相同的内容。

【讨论】：