如何根据Angular2中DOM元素的背景颜色设置变量？

Question

我有以下DOM结构：

<div *ngFor="let art of artfacts" class="parent">
  <div class="child">
    <img [src]=""/>
  </div>
</div>

现在，我想基于“父母”的背景颜色为我的图像设置不同的来源。如何在DOM渲染期间实现这一目标？

Answer 1

如果您将颜色变为艺术品，则可以设置为

<div *ngFor="let art of artfacts" class="parent" style="background-color:{{art.color}}">
  <div class="child">
    <img [src]=""/>
  </div>
</div>

Answer 2

为每个art对象设置颜色和图像src，然后执行：

<div *ngFor="let art of artfacts" class="parent" [ngStyle]="{'background-color': art.color">
  <div class="child">
    <img [src]="art.image?.src">
  </div>
</div>