1. ホーム
  2. angular

[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?

2022-04-24 20:20:20

質問

私のコード

<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を超えて)がページに表示されます。

解決方法を教えてください。

この方が簡単だと思うのですが

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