ng Для элементов в строке

Question

Я борюсь с отображением моих данных с помощью цикла * ngFor. Я хочу, чтобы ngFor отображал данные по 3 элемента в строке. я пробовал с индексацией. но тогда это был 1 элемент / строка.

<div class="container">
  <div class="row">
    <div class="mb-3 card-deck text-center">
      <div class="card mb-4 box-shadow" *ngFor="let product of item.product;">
        <div class="card-header">
            <h4 class="my-0 font-weight-normal">{{ product.name }}</h4>
        </div>
        <div class="card-body">
                <img src="{{ product.imagePath}}" class="img-thumbnail" alt="{{ product.name }}"> 
                <p class="lead">{{ product.msg }} {{ product.msg2 }}</p>
                <a role="button" class="btn btn-lg btn-block btn-primary" routerLink="product-details">More...</a>
        </div>
      </div>
    </div>
  </div>
</div>

Я буду очень признателен за любую помощь. Я использую

Angular-cli version 6.1.0
bootstrap 4

angular typescript ngfor

0

mfarhan 23 Окт 2018 в 13:13

Answer 1

Вы можете использовать классы начальной загрузки css для отображения 3 элементов в строке

Сделайте аналогичную структуру вашему html файлу

<div class="row">
 <div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let product of item.products">
  {{product.name}} | {{product.imagePath}} | {{product.msg2}} <!-- display product data -->
 </div>
</div>

1

Sarthak Aggarwal 23 Окт 2018 в 10:22

Answer 2

Вы можете просто добавить логику в index, как показано ниже:

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 3 == 0" class="row">
    {{ item }}
    <div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div>
    <div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div>
  </div>
</div>

3

Harunur Rashid 23 Окт 2018 в 10:23

ng Для элементов в строке

2 ответа

Похожие вопросы

Новые вопросы

angular