javascript - 如何更改 .css 类属性 - 背景 : url ('' ) for each item javascript/typescript

Question

这是我从数据库中显示产品的方式:

<div *ngFor="let product of products;">
  <div id="article1" class="article">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>

如您所见，id="article1"上有 .css 类“article”。

这是 .css 文章类:

.article {
  background-color: black;
  cursor: pointer;
  background: url('../../src/assets/images/funny-photo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center;
}

因为可以看到背景:此类 .article 的 url 是硬编码的:

背景:url('../../src/assets/images/funny-photo.jpg');

我如何为每个元素设置不同的 background: url 以及数据库中相应的 url？

谢谢大家 干杯

Answer 1

使用 [style.background] 并在 url 中设置当前产品的 url

<div *ngFor="let product of products;">
  <div id="article1" class="article" [style.background]="'url('+product.image+')'">
    <p class="product-price">{{product.mpc | number}}</p>
    <p class="product-title">{{product.title}}</p>
  </div>
</div>