Angular 4 - 条件 *ngFor 显示每第三个元素

Question

我有一个 ngFor 循环，我希望它只迭代数组中的每个第三个元素，就像我期望下面的代码一样:

for(let i=0; i<array.length; i=i+3)...

我当前的 ngFor 代码如下所示:

<md-card class="cardContainer" *ngFor="let viz of visualisationList; let i = index">
    <md-card-header>
        <md-card-title>{{ viz['Title'] }}</md-card-title>
        <md-card-subtitle>Datasets: {{ viz['Datasets'] }}</md-card-subtitle>
    </md-card-header>
</md-card>

有没有一种简单的方法可以在 ngFor 循环中做到这一点？我可以在 ngInit() 中使用 typescript 预先过滤成 3 个数组，或者我可以使用 ngIf 和模函数，但我希望我可以直接在 ngFor 循环中执行此操作。

Answer 1

我认为最简单、最干净的方法是使用 Array.filter 和这样的 getter 来过滤组件逻辑中的数组:

public get filteredArray() {
    return this.array.filter((value, index) => index % 3 === 0);
}

并将过滤后的数组用于您的 ngFor。

注意:如果您的数组被装饰为输入，则它可能是未定义，您应该使用空数组对其进行初始化，或者在 getter 内部检查它之前是否未定义使用filter方法。