Используя ngFor, добавьте два элемента в строку, а затем создайте новую строку - PullRequest
Новая
       7

Используя ngFor, добавьте два элемента в строку, а затем создайте новую строку

0 голосов
/ 26 ноября 2018

, поэтому я некоторое время пытался перебрать массив объектов, используя * ngFor, с двумя элементами, размещенными внутри строки.После того, как каждые 2 компонента были добавлены в строку, должна быть сгенерирована новая строка и т. Д.

То, что я пробовал до сих пор ниже: 

<div class="row" *ngFor="let prod of products; let i = index; let even = even">
<span *ngIf="even">
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ prod.imagePath }}" alt="{{ prod.name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ prod.name }}</h2>
        </div>
        <div>
            <h3>Price: {{ prod.price }}</h3>
        </div>
    </div>
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ products[i+1].imagePath }}" alt="{{ products[i+1].name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ products[i+1].name }}</h2>
        </div>
        <div>
            <h3>Price: {{ products[i+1].price }}</h3>
        </div>
    </div>
</span>

IЯ проверил все соответствующие вопросы, которые я мог найти здесь, но ни один из них, похоже, не решил мою проблему.

В настоящий момент каждый элемент идет в свой ряд, независимо от того, что я делаю.

У меня естьпытался изменить размеры контейнеров для каждого из элементов, но безрезультатно.

Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 26 ноября 2018

Лучший способ сделать это - преобразовать структуру массива ваших продуктов, чтобы он представлял собой массив массивов.Тогда структуру, которую вы хотите, легко зациклить и распечатать.

Вы можете выполнить преобразование, используя pipe.Пример: 

     @Pipe({
       name: 'updateRows'
     })
     export class UpdateRowsPipe implements PipeTransform {

      transform<T>(value: T[], perRow: number): T[][] {
          let rows: T[][] = [];
          for (let i = 0; i < value.length; i += perRow) {
            rows.push(value.slice(i, i + perRow))
        }
        return rows;
    }

  }

, а затем использовать его там, где у вас есть *ngFor: 

    <div class="row" *ngFor="let row of products | updateRows:2">
        <div *ngFor="let product of row">
            <div class="col-md-6 offset-3">
                 <div>
                <img src="{{ product.imagePath }}" alt="{{ product.name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
            </div>
            <div>
                <h2>{{ product.name }}</h2>
            </div>
            <div>
                <h3>Price: {{ product.price }}</h3>
            </div>
        </div>
          <!-- Do some more fun things here --> 
     </div>   

</div>
...