Чи можна використовувати ngFor з оператором модуля в Angular 2 - html, кутовий

Я записую зображення на веб-сторінку. Кожні три зображення я хотів би почати новий рядок.

Відповіді:

Ви можете досягти цього, виконавши такі дії:

<div *ngFor="let t of temp(math.ceil(arr.length/3)).fill(); let i = index" class="row">
<div *ngFor="let item of arr.slice(3*i,3*i + 3);" class="item">
{{item}}
</div>
</div>

А в компоненті:

export class App {
temp = Array;
math = Math;
arr= [1,2,3,4,5,6,7,8,9,10,11];
}

Тут працює Планкер

Ви можете отримати доступ до індексу ітерації з *ngFor подобається так:

*ngFor="let x of container; let i = index;"

Ви можете посилатися на цей індекс у *ngIf всередині *ngFor щоб відобразити новий рядок:

<div *ngIf="i%3 === 0">

Запозичення з обох відповідей, але нахилившись більше на Алекс, ось як я виконав її ng2 (v2.0.1).

<template ... застаріло. Де ви бачите <template ... ви повинні використовувати <ng-template ... після v5.

<template ngFor let-peer [ngForOf]="peers" let-p="index" let-last="last">
<div class="row" *ngIf="p % 2 === 0">
<div class="col-xs-8 col-sm-6">
<label><input type="checkbox" ...&nbsp;{{peers[p].name}}</label>
</div>
<div class="col-xs-8 col-sm-6" *ngIf="!last">
<label><input type="checkbox" ...&nbsp;{{peers[p+1].name}}</label>
</div>
</div>
</template>

Зауважте, що під час отримання кожного елемента з колекції let-peer [ngForOf]="peers", Я його спеціально не використовую. Замість цього я використовую колекцію та індекс, let-p="index", додаючи до індексу, якщо необхідно, наприклад, peers[p] і peers[p+n].

Відрегулюйте свій модуль у міру необхідності. Останній рядок повинен перевірятися, щоб переконатися, що перший стовпець останнього стовпця не є останній пункту у повторі.