Können Sie ein ngFor mit einem Modulo-Operator in Angular 2 - html, angular verwenden?

Ich schreibe Bilder auf die Webseite. Alle drei Bilder möchte ich eine neue Zeile beginnen. Unterstützt eckige 2 das?

Antworten:

Sie können es erreichen, indem Sie Folgendes tun:

<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>

Und in deiner Komponente:

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

Hier arbeitet Plunker

Sie können auf den Index der Iteration von der *ngFor so:

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

Sie können dann auf diesen Index in einem verweisen *ngIf innerhalb der *ngFor um deine neue Zeile anzuzeigen:

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

Entlehnung an beide Antworten, aber eher an Alex 's angelehnt, hier habe ich es geschafft ng2 (v2.0.1).

<template ... ist veraltet. Wo siehst du <template ... du solltest benutzen <ng-template ... nach 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>

Beachten Sie, dass, während ich jedes Element aus der Sammlung bekomme, let-peer [ngForOf]="peers", Ich benutze es nicht speziell. Stattdessen benutze ich die Sammlung und den Index, let-p="index", Hinzufügen zu dem Index wie benötigt, z.B. peers[p] und peers[p+n].

Passen Sie Ihren Modul nach Bedarf an. Die letzte Zeile sollte überprüfen, ob die erste Spalte bis zur letzten Spalte nicht die ist letzte Element im iterablen.