如何为 ngFor 循环添加条件

Question

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

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

您应该也可以转到下一页。也就是说，第一个 table 更新到项目 21-30，第二个 table 更新到 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 <

Answer 1

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

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

Answer 2

使用切片

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

像这样：

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

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

如何为 ngFor 循环添加条件

How to add a condition for ngFor loop

html

javascript

clarity

angular