代码之家 › 专栏 › 技术社区 › Roxy'Pro

如何更改每个项目javascript/typescript的.css类属性-background:url('')

typescript angular css jquery javascript

0

Roxy'Pro · 技术社区 · 7 年前

以下是我如何显示数据库中的产品:

<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;
}

因为可以看到这个类的background:url。文章是硬编码的:

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

如何为每个项目设置不同的 background: url 从数据库得到相应的url?

谢谢你们干杯

2 回复 | 直到 7 年前

1

××× × ×××× 7 年前

使用 [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>

2

0

Aravind S 7 年前

如果它的角度那么试试

<div [ngStyle]="{'background-image': 'url(' + photoURL + ')'}"></div>

在你的ngfor循环中