Angular 2 & Bootstrap - teilen Sie eine Liste in 2 Spalten basierend auf der Anzahl der Elemente in Array

Question

Ich habe gerade angefangen zu lernen Angular 2 und dachte über eine gute Möglichkeit, dies zu tun. Nehmen wir an, ich habe ein Array mit 10 Objekten. Also würde ich gerne 5 Objekte in jede Bootstrap Spalte legen. Ich hoffe, dass mir jemand helfen kann.

Answer 1

Dies ist kein echtes Angular- oder Typescript-Problem. Hier sind zwei Möglichkeiten:

Schneiden Sie das Array in zwei Hälften:

let half = Math.ceil(array.length/2);  

let leftSide = array.splice(0, half); 

let rightSide = array.splice(half, array.length - half); 

Oder machen Element abwechselnd Schleife über Array für jede Spalte:

<template *ngFor="let item of array; let i = index"> 

<li *ngIf="i % 2 == 0"></li> 

</template> 

Answer 2

Ein einfacher Weg, um zu gehen, würde dies zu sei einfach, die column-count CSS-Eigenschaft zu verwenden.

css:

.columnList { 
    column-count: 2; 
} 

html:

<ul class="columnList"> 
    <li *ngFor="let item of items">{{item}}</li> 
</ul>