Ограничить 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>

В качестве альтернативы, вы можете использовать трубу среза для усечения вашего массива до 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

Это возможно (если маловероятно, как указывает Леонардо). SlicePipe потребуется для импорта:

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

Например, применив фрагмент к исходному коду:

<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>