javascript - 如何在.html模板Angular中的div上定义多种样式

Question

我需要在我的 div 上设置这个属性：

background: url();
background-repeat: no-repeat;
background-size: cover;
background-position: center, center;

这是我的 div：

<div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
  <div class="order-img"   [style.background]="'url('+ orderItems.product.img.url +')'" ></div>
  <div class="order-title">
    <p>{{orderItems.product.title}}</p>
  </div>
</div>

如您所见，我已经设置[style.background] url了但我不知道如何设置其余属性/多个属性..

谢谢任何形式的帮助都会很棒！

- - - - 编辑：

 <div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
      <div class="order-img"   [ngStyle]="{'background':'url('+ orderItem.product.imgUrl +')', 'background-repeat':' no-repeat','background-size': 'cover;','background-position': 'center, center' }" ></div>
      <div class="order-title">
        <p>{{orderItems.product.title}}</p>
      </div>
    </div>

使用 ngStyle 导致了这个：

属性没有正确应用...

标签： javascripthtmlcssangularcss-selectors

Answer 1

使用ngStyle标签

<div   [ngStyle]="{'background-image':'url( orderItem.product.imgUrl )', 'background-repeat':' no-repeat','background-size': 'cover','background-position': 'center, center' }"  class="order-img"  ></div>

演示