如何为 ngFor 循环添加条件

如何解决如何为 ngFor 循环添加条件

我正在使用 Clarity 创建一个表。它们有自己的语法 clrDgItems，但结构与 ngFor 相同。

我想为我的表格创建一个循环，它过滤前 10 个项目，然后第二个表格只显示第 11-20 个项目。

您还应该可以转到下一页。也就是说，第一个表更新到项目 21-30，第二个表更新到 31-40

我的第一个想法是，

ngFor="let employee of employees; i as index; i < firstMaxIndex;"
ngFor="let employee of employees; i as index; i > firstMaxIndex && i < secondMaxIndex"

但是 ngFor 循环不是这样工作的，我得到了错误：NG5002: Parser Error: Unexpected token <

解决方法

使用切片

{{ value_expression | slice : start [ : end ] }}

就像这样：

ngFor="let employee of employees | slice : 0 : firstMaxIndex"

ngFor="let employee of employees | slice : firstMaxIndex : secondMaxIndex"

最好将条件和循环分开，如下所示：

<ng-container *ngFor="let employee of employees; i as index;">
    <div *ngIf="i > firstMaxIndex && i < secondMaxIndex">
        // add elements or display values based on your needs.
    </div>
</ng-container>