如何将 *ngFor 分成 4 个部分？在角度答案

【问题标题】：How to split *ngFor in 4 parts each? in angular如何将 *ngFor 分成 4 个部分？在角度
【发布时间】：2018-11-28 12:03:26
【问题描述】：

如何将此代码输出分成 4 个部分？是否有可能使用 ngFor 并告诉它将数组分成批次并动态显示？

<h4>Reservation Slots</h4>

<table class="table table-bordered">
    <tr  *ngFor="let slots of reservationSlotsList" >
        <td class="text-center">{{slots}}</td>
    </tr>
</table>

我希望得到预期的输出

  <table class="table table-bordered">
        <tr>
            <td class="text-center">my-slot1</td>
            <td class="text-center">my-slot2</td>
            <td class="text-center">my-slot3</td>
            <td class="text-center">my-slot4</td>
        </tr>
        <tr>
            <td class="text-center">my-slot1</td>
            <td class="text-center">my-slot2</td>
            <td class="text-center">my-slot3</td>
            <td class="text-center">my-slot4</td>
        </tr>
        ...

    </table>

谢谢！

【问题讨论】：

How to show 1 element in ngFor in angular2?的可能重复

标签： angular angular6

【解决方案1】：

可以是：

<table class="table table-bordered">
    <tr  *ngFor="let tr of trs;let j=index" >
        <td class="text-center" *ngFor="let slots of reservationSlotsList;let i=index" class="text-center">{{slots}}</td>
    </tr>
</table>

例子：

reservationSlotsList = ['my-slot1' , 'my-slot2','my-slot3', 'my-slot4' ]
trs = [0 , 1]

DEMO

【讨论】：

很抱歉没有共享reservationSlotsList 数组。其实是reservationSlotsList = ['my-slot1' , 'my-slot2','my-slot3', 'my-slot4', 'my-slot5' , 'my-slot6','my-slot7', 'my-slot8', . . .]，结果一定是<tr> <td class="text-center">my-slot1</td> <td class="text-center">my-slot2</td> <td class="text-center">my-slot3</td> <td class="text-center">my-slot4</td> </tr> <tr> <td class="text-center">my-slot4</td> <td class="text-center">my-slot5</td> ... </tr>

【解决方案2】：

我认为最适合你的是在你的组件中创建一个像这样的自定义函数：

nArray(n: number): any[] {
    return Array(n);
}

在你的html里面：

<h4>Reservation Slots</h4>
<table class="table table-bordered">
    <tr  *ngFor="let item of nArray(4)" > // 4 for your particular use
        <td class="text-center" *ngFor="let slots of reservationSlotsList">{{slots}}</td>
    </tr>
</table>

【讨论】：