Как определить несколько стилей на div в .html-шаблоне Угловая

Мне нужно установить эти свойства в 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 вызвало следующее:

введите описание изображения здесь

атрибуты не применяются должным образом ...

javascript,html,css,angular,css-selectors,

1

Ответов: 2

0 принят

использовать ngStyleтег

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

демонстрация

0

Попробуй это.

CSS

.order-img{
background: url(--content);
background-repeat: no-repeat;
background-size: cover;
background-position: center, center;
}

HTML

<div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
  <div class="order-img" [attr.outage-count]="orderItems.product.img.url" ></div>
  <div class="order-title">
    <p>{{orderItems.product.title}}</p>
  </div>
</div>
JavaScript, HTML, CSS, угловые, CSS-селекторов,
Похожие вопросы
Яндекс.Метрика