我的 html 创建了一个表格,其中的按钮当前为绿色。
html
<tr *ngFor="let d of dataLinkResult;">
<td>
<a [routerLink]="['/details', d.leftDatabase, d.leftCollection,d.leftId ]">
<span *ngIf="d.leftId" class="btn {{d.leftId}} table-button text-left" data-toggle="tooltip"
title="Database: {{d.leftDatabase}}, Collection: {{d.leftCollection}}">{{d.leftName}}</span>
<span *ngIf="!d.leftId" class="btn table-button text-left" id="leftNode">[NULL]</span>
</a>
<br>
<i style="color:black">Database: {{d.leftDatabase}}, Collection: {{d.leftCollection}}</i>
</td>
<td class="relationship">{{d.relationshipDescription}}</td>
<td>
<a [routerLink]="['/details', d.rightDatabase, d.rightCollection,d.rightId ]">
<span *ngIf="d.rightId" class="btn {{d.rightId}} table-button text-left" data-toggle="tooltip"
title="Database: {{d.rightDatabase}}, Collection {{d.rightCollection}}">{{d.rightName}}</span>
<span *ngIf="!d.rightId" class="btn table-button text-left" id="rightNode">[NULL]</span>
</a>
<br>
<i style="color:black">Database: {{d.rightDatabase}}, Collection: {{d.rightCollection}}</i>
</td>
</tr>
数据链接结果的每个 d 如下所示:
{id: "5dd41cb989a1db3edcdafbed",
leftDatabase: "Random",
leftCollection: "lorems",
leftId: "5dd41cb289a1db3edcdafa14",
leftName: "nihil",
leftColour: "#32a89e",
rightDatabase: "Commerce",
rightCollection: "products",
rightId: "5dd41cb289a1db3edcdaf990",
rightName: "Unbranded Metal Soap",
rightColour: "#a88b32"}
最后是我的 css,我想根据 d.leftColour 或 d.rightColour 中的内容进行更改
.table-button {
background-color: chartreuse;
}
所以在这种情况下 - 我希望 id 为 leftNode 的元素的颜色为 #32a89e,id 为 rightNode 的元素的颜色为#a88b32。
但是对于 dataLinkResult 的每个 d 这可能会发生变化 - 所以我需要确保颜色动态更新。
如果可能的话,我希望不要为此使用 JQuery 。
最佳答案
使用ngStyle
,
对于左键,
[ngStyle]="{'background-color':d.leftColour}"
对于右键,
[ngStyle]="{'background-color':d.rightColour}"
关于html - 如何使用 Javascript 对象中的变量值动态更改按钮的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59391472/