html - 如何使用 Javascript 对象中的变量值动态更改按钮的颜色？

Question

我的 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"}

最后是我想根据 d.leftColour 或 d.rightColour 中的内容更改的CSS

.table-button {
background-color: chartreuse;
}

所以在这种情况下 - 我希望 id 为 leftNode 的元素具有颜色#32a89e，而具有 id 为 rightNode 的元素具有颜色#a88b32。

但这对于 dataLinkResult 的每个 d 都有可能发生变化 - 所以我需要确保颜色是动态更新的。

如果可能的话，我不想为此使用 JQuery。

标签： htmlcssangular

Answer 1

使用ngStyle,

对于左键，

[ngStyle]="{'background-color':d.leftColour}"

对于右键，

[ngStyle]="{'background-color':d.rightColour}"

演示：https ://stackblitz.com/edit/angular-1l1ztr