如何将 ngFor 中的项目重复限制为 div 中的某个数字，然后在 Angular 中重复？

Question

我有一个图片库，我希望在 <div> 中包含 x 个图像，然后对下一个 x 个图像重复相同的 div。在 google 上搜索后，我尝试了各种技巧，但都失败了。我想维护所有类

的 CSS 属性

我的密码是

<div class="container">
    <div class="myimages">
        <div class="first-column"  *ngFor="let item of projectList | keyvalue">
            <img [src]=' item.value.img' alt="image">
        </div>
    </div>
</div>

输出就像

<div class="container">
    <div class="myimages">
        <div class="first-column">
            <img [src]='1.img' alt="image">
        </div>
        <div class="first-column">
            <img [src]='2.img' alt="image">
        </div>
       <div class="first-column">
            <img [src]='3.img' alt="image">
        </div>
        <div class="first-column">
            <img [src]='4.img' alt="image">
        </div>
    </div>
</div>

期望的输出是

<div class="container">
    <div class="myimages">
        <div class="first-column">
            <img [src]='1.img' alt="image">
            <img [src]='2.img' alt="image">
            <img [src]='3.img' alt="image">
            <img [src]='4.img' alt="image">
        </div>
        
        <div class="first-column">
            <img [src]='5.img' alt="image">
            <img [src]='6.img' alt="image">
            <img [src]='7.img' alt="image">
            <img [src]='8.img' alt="image">
        </div>
    </div>
</div>

Answer 1

在循环中结合使用 index 和模数运算符：

<div class="container">
    <div class="myimages">
        <ng-container *ngFor="let item of projectList | keyvalue" let-i="index">
            <div class="first-column" *ngIf="i % 4 === 0">
                <img [src]="projectList[i].value.img" alt="image">
                <img [src]="projectList[i + 1].value.img" alt="image">
                <img [src]="projectList[i + 2].value.img" alt="image">
                <img [src]="projectList[i + 3].value.img" alt="image">
            </div>
        </ng-container>
    </div>
</div>

如何将 ngFor 中的项目重复限制为 div 中的某个数字，然后在 Angular 中重复？

How can I limit items in ngFor repeat to some number in div and then repeat in Angular?

angular

ngfor