Angular Ng для итерации по x объектам в массиве

Question

Я хочу перебрать первые четыре объекта массива. Я хочу использовать ngFor вместо выбора первых четырех объектов, таких как:

{{ users[*]?.UserName }} 

*, являющихся 0-3

Я хочу использовать это:

<div *ngFor="let user of users; let i = index" [attr.data-index]="i"> 
{{user?.UserName}}

Это работает, но отображает всех пользователей в массиве, и мне нужны только первые 4 (индекс 0-3). Есть ли способ сказать ng для чего-то вроде: я <4? </p>

Answer 1

Вы можете использовать трубу slice:0:3, как показано ниже

<div *ngFor="let user of users | slice:0:3; let i = index" [attr.data-index]="i">

    {{user?.UserName}}

Демо https://stackblitz.com/edit/angular-hjgubx

Answer 2

Вы можете попробовать вот так. используйте ngconainter и ng if для ограничения числа пользователей до 4.

<div *ngFor="let user of users; index as i" [attr.data-index]="i"> 
    <ng-container *ngIf="i<4">
       {{user?.UserName}}
    </ng-container>
</div>