Angular 2＆Bootstrap - 根據陣列中元素的數量將列表拆分爲2列

Question

我剛開始學習Angular 2並且正在考慮一個很好的方法來做到這一點。假設我有一個包含10個對象的數組。所以我想在每個列中放置5個對象。我希望有人能幫助我。

Answer 1

這不是一個真正的Angular或Typescript問題。這裏有兩種可能性：

削減了一半的數組：

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

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

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

或者渲染元素交替，遍歷數組每一列：

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

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

</template> 

Answer 2

一個簡單的方法去了解這將爲只是要使用column-count css屬性。

CSS：

.columnList { 
    column-count: 2; 
} 

HTML：

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