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>