如何应用多种颜色Angular 9答案

【问题标题】：How to apply multiple colors Angular 9如何应用多种颜色Angular 9
【发布时间】：2020-05-12 21:07:01
【问题描述】：

我在按钮中使用 ngFor，我从数据中获得了 4 个结果，并且我希望 HTML 中有 4 个按钮。如何为这个按钮应用 4 种不同的颜色？

我使用 Object.values 仅从 obj 中获取链接并在 this.img 中分配 colors > 当单击 4 个按钮之一时，我在 HTML 中使用它来显示每个图像。这就是为什么我需要应用到每个按钮的背景颜色

Page in browser

    <div class="col-md-4 col-lg-4">
      <img [src]="img">
    </div>

      <div>
        <span class="title-description">Select color:</span>
        <div class="row" style="margin-left: 0px;">
          <button *ngFor="let colors of product.image" class="card ml-1" 
                  (click)="changeColor(colors)"
                  style="height: 30px; width: 30px;">
          </button>
        </div>
      </div>

changeColor(colors) {
this.img = Object.values(colors);
}

【问题讨论】：

如果您查看我的答案中的链接，我认为它可以满足您的需求。

标签： html css angular

【解决方案1】：

您需要为this.product.image 中的每个对象添加一个color 属性，并带有一个颜色代码，然后您可以使用它来设置按钮样式。例如：

products = [
    {color: 'red', path: 'https://via.placeholder.com/150'}, 
    {color: 'green', path: 'https://via.placeholder.com/250'}, 
    {color: 'yellow', path: 'https://via.placeholder.com/350'}, 
    {color: 'blue', path: 'https://via.placeholder.com/450'}
];

然后您可以使用ngStyle 为每个按钮设置样式，使用这些颜色：

<button *ngFor="let product of products" [ngStyle]="{'background-color': product.color}" (click)="img = product.path"></button>

<img *ngIf="img" [src]="img">

例如here。

【讨论】：