角4-条件*ngfor每3个元素显示一次

Question

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

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

注意：如果您的数组作为输入修饰为undefined，则应该使用空数组初始化它，或者在使用filter方法之前检查getter中是否未定义。