将迭代中的3个项目包装到div中的角模数

Question

我目前正在尝试在ngFor的3个项目中包装包装器div：

<ng-template [ngIf]="stories.length > 0" [ngIfElse]="empty">
    <cdk-virtual-scroll-viewport [itemSize]="itemSize | async" (scrolledIndexChange)="nextBatch()">

        <ng-container *cdkVirtualFor="let story of stories; let i = index; trackBy:trackById">
            <div class="inner-wrap" *ngIf="(i+1) % 3 !== 1">
                <app-story-preview class="fade-in-animation" [layout]="layout | async" [item]="story"></app-story-preview>
            </div>
        </ng-container>

    </cdk-virtual-scroll-viewport>
</ng-template>

我本来希望3x app-story-preview被打包到div.inner-wrap中……但是他们不会。它在div中总是以1x app-story-preview结尾...有人知道我在做什么错吗？

Answer 1

例如，您可以尝试将您的故事数组转换为内部包含3个元素的子数组的数组

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let size = 3;
let result = [];
for (let i = 0; i <Math.ceil(array.length/size); i++){
    result[i] = array.slice((i*size), (i*size) + size);
}