Angular Modulo 将迭代中的 3 个项目包装到一个 div 中答案

【问题标题】：Angular Modulo for wrapping 3 items in iteration into a divAngular Modulo 将迭代中的 3 个项目包装到一个 div 中
【发布时间】：2019-12-20 21:16:04
【问题描述】：

我目前正在尝试在 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 结尾......有人知道我做错了什么吗？

【问题讨论】：

标签： javascript angular typescript modulo

【解决方案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);
}

并像这样使用它

<ng-container *cdkVirtualFor="let storyBlock of stories; let i = index;">
                <div class="inner-wrap" *ngFor="let story of storyBlock">
                    <app-story-preview class="fade-in-animation" [layout]="layout | async" [item]="story"></app-story-preview>
                </div>
</ng-container>

【讨论】：