将 ngFor 迭代限制为固定数量

Question

我有一个带有旋转木马的页面，我想要最多 7 个点，即使我有 10 张幻灯片。我正在搜索，但我还没有发现任何东西。这是我的代码

<div class="subject-pagination">
  <div class="page-item" *ngFor="let subject of pageIdentityTraitArray.subjects"
    [ngStyle]="subject.nid === subjectId ? {'background-color': pageIdentityTraitArray.color} :'' ">
    <a [routerLink]="[ '/code-of-ethics/identity-trait', pageId, subject.nid, '1' ]"></a>
  </div>
</div>

请问如何限制为 7 个点？谢谢

Answer 1

您可以将索引添加到您的 ngFor 语句中，并在条件中使用它以仅添加最多 7 个链接：

<ul>
    <ng-container *ngFor="let page of pages; let i = index">
        <li *ngIf="i < 7">
            <a [href]="page.link">{{page.name}}</a>
        </li>
    </ng-container>
</ul>

或者，您可以使用 slice pipe 将数组截断为 7 个元素：

<ul>
    <li *ngFor="let page of pages | slice:0:7">
        <a [href]="page.link">{{page.name}}</a>
    </li>
</ul>

https://stackblitz.com/edit/angular-mmjmqa?file=src%2Fapp%2Fhello.component.html

中显示的两种方法

有可能（如果 Leonardo 指出不太可能）需要导入 SlicePipe：

import { SlicePipe } from '@angular/common';

例如将 slice 应用于您的原始代码：

<div class="subject-pagination">
    <div class="page-item" *ngFor="let subject of pageIdentityTraitArray.subjects | slice:0:7"
[ngStyle]="subject.nid === subjectId ? {'background-color': pageIdentityTraitArray.color} :'' ">
        <a [routerLink]="[ '/code-of-ethics/identity-trait', pageId, subject.nid, '1' ]"></a>
    </div>
</div>

将 ngFor 迭代限制为固定数量

Limit ngFor iterations to a fixed number

angular

carousel

ngfor