![](/img/trans.png)
[英]How can i output this json in the specific output using ngFor in Angular 8
[英]How can I split data which printed using ngfor to 3 columns in angular?
數據
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
我想將該數據分為3列,並希望按如下方式進行處理:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
<li>10</li>
</ul>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
...
<li>20</li>
</ul>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
...
<li>30</li>
</ul>
使用ngfor時如何拆分數據?
<ul *ngFor="let item of arr">
<li>{{item}}</li>
</ul>
首先,應該是這樣的:
<ul>
<li *ngFor="let item of arr">{{item}}</li>
</ul>
並將其添加到您的CSS中:
ul{
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
您可以使用slice :
<ul>
<li *ngFor="let item of arr.slice(0,10)">{{item}}</li>
</ul>
<ul>
<li *ngFor="let item of arr.slice(10,20)">{{item}}</li>
</ul>
<ul>
<li *ngFor="let item of arr.slice(20,30)>{{item}}</li>
</ul>
function chunkArray(myArray, chunk_size){
var results = [];
while (myArray.length) {
results.push(myArray.splice(0, chunk_size));
}
return results;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
// Split in group of 3 items
arr = chunkArray(arr, 3);
在HTML中添加嵌套的* ngFor
<ul *ngFor="let chunckedArr of arr">
<li *ngFor="let item of chunckedArr">{{item}}</li>
</ul>
name = 'Angular';
objectKeys = Object.keys;
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
arr2 = { 0 : 10, 10 : 20, 20 : 30};
<ul *ngFor="let key of objectKeys(arr2)">
<ng-container *ngFor="let item of arr" >
<li *ngIf="item > key && item <= arr2[key]" >{{item}}</li>
</ng-container>
</ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.