如何在Angular手风琴中停止不必要的空容器[循环]

Question

如何在Angular手风琴中停止不必要的循环，请查看视图只有3是限制显示数据及其正确，但在此之后它还为空面板创建了不必要的循环。请检查屏幕截图

提前致谢

Answer 1

问题是因为限制项目小于3会被应用于标题div内的元素。因此，仍然会为数组中的所有元素创建标题div。您可以通过两种方式解决此问题

使用ng-container为标题div创建一个包装元素。 https://angular.io/guide/structural-directives

  <ng-container *ngFor="let item of items;let i=index">
    <li *ngIf="i<3">{{item}}</li>
  </ng-container>

使用切片管道。 https://angular.io/api/common/SlicePipe

<ul>
  <li *ngFor="let item of items|slice:0:3">{{item}}</li>
</ul>

样本stackblitz在这里 - https://stackblitz.com/edit/angular-uvkvmj