Стилизация dom элементов, сгенерированных ngfor - PullRequest
Новая
       7

Стилизация dom элементов, сгенерированных ngfor

0 голосов
/ 14 апреля 2019

Справочная информация: Итак, я получаю некоторые данные из серверной части, которые я храню в виде массива на моей угловой консоли.Теперь я пытаюсь отобразить каждый из этих элементов (которые являются продуктами) в шаблоне.В основном я пытаюсь добиться того, чтобы продукты на странице могли просматривать пользователи.

Проблема: Проблема в том, что ngfor просто рисует элементы один за другим по вертикальной линиина шаблоне.Я хочу иметь возможность применять общие настройки стиля (возможно, для родительского элемента, размещающего ngfor?), Чтобы элементы проходили от верхнего левого края страницы до верхнего правого в строке от 1 до X количества элементов в соответствии с областью просмотраwidth, а затем продолжайте в том же духе в следующих строках, пока в исходном массиве не останется ни одного.PS.Я попытался использовать CSS сетки и flexbox в родительском элементе, но они просто игнорируются шаблоном.

Буду признателен, если кто-нибудь укажет мне направление, откуда я смогу достичь желаемого результата.

Код моего шаблона выглядит следующим образом: 

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer" >
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 14 апреля 2019

Проверьте пример реализации здесь РАБОЧИЙ СТЕКБЛИЦ

Если в вашем приложении есть начальная загрузка , добавьте class="d-flex flex-wrap" like below

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer" class="d-flex flex-wrap">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

В обычный CSS применить CSS display: flex; flex-wrap: wrap; к id="saleItemsContainer"

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

Использование CSS Grid 

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

Добавить CSS к saleItemsContainer

#saleItemsContainer {
  display: grid;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.4rem;
  grid-template-columns: auto auto auto;
}
...