如何将 ngFor 重复限制为 Angular 中的某些项目？

小编典典

如何将 ngFor 重复限制为 Angular 中的某些项目？

all

我的代码：

<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

我试图在任何时候只显示 10
个列表元素。正如这里的答案所建议的，我使用了 ngIf
但这会导致页面上显示空列表项（超过 10 个）。

阅读 43

2022-08-17

共1个答案

小编典典

这对我来说似乎更简单

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

更接近您的方法

<ng-container *ngFor="let item of list; i as index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

选择

<ng-template ngFor let-item [ngForOf]="list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-template>

2022-08-17