角4 - 有条件* ngFor显示每3元

Question

我有一个ngFor循环，我希望它只是通过阵列中的每个元素3迭代，就像我期待下面的代码工作：

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

你可以到上一级移动ngFor到NG-容器和使用ngIf /对MD-卡上模，但我认为这是更好地准备你的数据在其到达视图之前，个人。

Answer 2

最简单，在我看来，最彻底的方法是通过使用Array.filter和吸气像这样您的组件的逻辑里面的滤镜阵列：

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

，并使用滤波阵列为您ngFor。

注：如果阵列饰有作为输入可能undefined，你应该有一个空数组初始化或检查getter中，如果它使用filter方法之前不确定的。

Answer 3

你也许可以使用Pipe过滤出。但是，您仍然需要定义它使组件知道它。有一个内置的SlicePipe，这不是你想要的，但非常相似。在此基础上我想你可以使用：

@Pipe({name: 'thirdelement', pure: false}) 
export class ThirdElementPipe implements PipeTransform { 
    transform(value: any): any { 
    if (value == null) return value; 

    if (!this.supports(value)) { 
     throw invalidPipeArgumentError(ThirdElementPipe, value); 
    } 

    return value.filter((v, i) => (i % 3 == 0)); 
    } 

    private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); } 
} 

而且使用它像

<md-card class="cardContainer" *ngFor="let viz of visualisationList | thirdelement; let i = index"> 

甚至更​​通用的SkipPipe：

@Pipe({name: 'skip', pure: false}) 
export class SkipPipeimplements PipeTransform { 
    transform(value: any, amount: number): any { 
    if (value == null) return value; 

    if (!this.supports(value)) { 
     throw invalidPipeArgumentError(SkipPipe, value); 
    } 

    return value.filter((v, i) => (i % amount == 0)); 
    } 

    private supports(obj: any): boolean { return typeof obj === 'string' || Array.isArray(obj); } 
} 

这应该是使用像

<md-card class="cardContainer" *ngFor="let viz of visualisationList | skip:3; let i = index">